Vue中$route和$router的区别
在Vue.js中，$route和$router是两个非常重要的概念，它们分别代表了当前路由信息和路由配置，虽然它们都与路由相关，但它们的功能和使用场景有所不同，本文将详细介绍$route和$router的区别。
1、$route
$route是一个响应式对象，它包含了当前路由的信息，如路径、参数、查询参数等，当路由发生变化时，$route会自动更新，我们可以通过$route对象获取当前路由的相关信息，也可以监听路由变化事件来执行相应的操作。
2、$router
$router是一个路由器实例，它是Vue Router的核心组件。$router负责管理路由的配置、导航以及页面之间的切换，它提供了一些方法，如push、replace、go等，用于实现页面之间的跳转。$router还提供了一些钩子函数，如beforeEach、afterEach等，用于在导航过程中执行一些自定义操作。
$route是一个响应式对象，用于表示当前路由的信息；$router是一个路由器实例，用于管理路由的配置和导航。
技术介绍
1、$route的基本用法
(1)获取当前路由的路径
this.$route.path
(2)获取当前路由的参数
this.$route.params
(3)获取当前路由的查询参数
this.$route.query
(4)监听路由变化事件
this.$route.watch(() => {
console.log('路由发生变化');
});
2、$router的基本用法
(1)配置路由规则
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];
(2)创建路由器实例
import VueRouter from 'vue-router'; const router = new VueRouter({ routes });
(3)导航到指定页面
router.push('/home'); // 跳转到/home页面
router.push({ name: 'About' }); // 根据name属性跳转到/about页面(需要在路由配置中定义name属性)
(4)实现页面之间的跳转方法(可选)
Vue Router提供了一些内置的方法，如go、replace、redirect等，用于实现页面之间的跳转，这些方法的使用方式如下：
// 跳转到指定的路由路径，保留当前页面的历史记录(浏览器地址栏不会改变) router.go(-1); // 返回上一页面或前进一个历史记录条目(-1表示返回上一页面；1表示前进一个历史记录条目) router.go(0); // 重置历史记录栈，回到首页(浏览器地址栏会改变) router.go(1); // 前进到下一个历史记录条目(浏览器地址栏会改变)
相关问题与解答
1、如何动态添加和删除路由？
答：可以使用Vue Router提供的addRoutes和removeRoutes方法来动态添加和删除路由，示例代码如下：
// 添加路由规则
router.addRoutes([{ path: '/new-page', component: NewPage }]);
// 删除路由规则(根据组件名称删除)
router.removeRoutes((matched) => matched.component === NewPage);
2、如何实现路由拦截器？
答：可以使用Vue Router提供的beforeEach钩子函数来实现路由拦截器，在beforeEach钩子函数中，可以对即将进入的路由进行判断和处理，示例代码如下：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.isLoggedIn) { // 如果目标路由需要登录验证且用户未登录，则跳转到登录页面并在登录成功后重定向回原路由(假设登录组件为LoginComponent)
next({ name: 'Login' }); // 跳转到登录页面(需要在登录组件中定义重定向的路由名称)
} else {
next(); // 否则正常跳转到目标路由(无需重定向)
}
});
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/224367.html
微信扫一扫 