【vue高频面试题—路由篇】：Vue Router $route 和$router的区别

1. 概述

名称	$route	$router
含义	当前活跃路由的对象，包含与路由相关的信息（只读）。	路由实例对象，包含导航的方法和全局路由配置。
类型	是一个路由对象，表示当前路由的状态和信息。	是 VueRouter 类的实例，负责管理路由和执行跳转。
主要功能	提供当前路由的路径、参数、查询等详细信息。	提供路由导航的方法（如 push、replace 等）。

---

2. 用法和属性

$route 的用法

• $route 是当前路由对象，包含有关当前路由的信息（只读），比如：

  • 路径（path）
  • 查询参数（query）
  • 动态参数（params）
  • 匹配的路由信息（matched）
  • 路由元信息（meta）

常见属性

this.$route.path      // 当前路由的路径，例如 "/home"
this.$route.params    // 动态路由参数，例如 { id: "123" }
this.$route.query     // 查询参数，例如 { search: "Vue" }
this.$route.name      // 当前路由的名称，例如 "home"
this.$route.meta      // 当前路由的元信息，例如 { requiresAuth: true }
this.$route.matched   // 当前路由匹配的路由记录数组

示例

// 动态路由定义
const routes = [
  { path: '/user/:id', name: 'user', component: User, meta: { requiresAuth: true } }
];

// 使用 $route 获取动态参数
console.log(this.$route.params.id);  // 输出动态参数 id 的值
console.log(this.$route.query.search);  // 获取 URL 中的查询参数
console.log(this.$route.meta.requiresAuth); // 是否需要认证

---

$router 的用法

• $router 是 VueRouter 的实例，包含与导航相关的方法，比如：

  • push()：添加一个新的路由到历史栈。
  • replace()：替换当前路由。
  • go()：在浏览历史中前进或后退。
  • beforeEach()：注册全局路由守卫。

常见方法

this.$router.push('/home');                // 跳转到 "/home"
this.$router.replace('/about');            // 替换当前路由为 "/about"
this.$router.go(-1);                       // 返回上一个页面
this.$router.beforeEach((to, from, next) => { 
  console.log('全局前置守卫'); 
  next(); 
});                                        // 注册全局守卫

示例

// 在方法中使用 $router 跳转
methods: {
  goToUser(id) {
    this.$router.push({ name: 'user', params: { id } }); // 动态参数跳转
  },
  logout() {
    this.$router.replace('/login'); // 退出后直接跳转到登录页
  }
}

---

3. 区别对比

特性	$route	$router
功能	提供当前路由的详细信息。	用于操作和管理路由，例如导航跳转。
只读 / 可读写	只读，不能修改 $route 的内容。	可读写，提供跳转、替换、注册路由守卫等方法。
导航能力	不具备导航能力，不能改变路由。	能导航到新路由，改变当前页面。
常用场景	获取当前路由的路径、参数、查询信息。	在逻辑代码中实现路由跳转。
类型	是路由对象，包含当前路由状态的详细信息。	是 VueRouter 实例，提供完整的路由操作功能。

---

4. 总结

• $route 是 路由的状态对象，用于查看当前路由的状态和信息（路径、参数、查询等）。
• $router 是 路由实例，用于执行路由操作（跳转、替换、注册守卫等）。

通常情况下，$route 用于获取当前路由信息，$router 用于控制页面跳转逻辑。