vue中$route和$router的区别有哪些

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(); // 否则正常跳转到目标路由(无需重定向)
  }
});