$route 和$router 的区别

在 Vue.js 中，$route 和 $router 是 Vue Router 提供的两个非常重要的对象，它们用于管理和操作路由。

1. $route 对象

• 定义：$route 是一个响应式的对象，它包含了当前激活路由的所有信息，例如路径、参数、查询字符串等。你可以把它看作是“当前路由快照”。

• 常见属性：

  • path: 当前路由的路径。
  • params: 动态路径参数（如 /user/:id 中的 id）。
  • query: URL 查询参数，以键值对形式存在。
  • hash: URL 中的哈希部分（即 # 后面的内容）。
  • name: 命名路由的名字。
  • matched: 匹配到的路由记录数组，每个记录包含组件配置等信息。
  • fullPath: 完整的路径，包括查询参数和哈希。

    console.log(this.$route.path); // 打印当前路径
    
    console.log(this.$route.params.id); // 打印动态路径参数 id

• $route 的用途

1. 读取路由信息：你可以使用 $route 来访问当前路由的各种信息，如路径 (path)、参数 (params)、查询字符串 (query) 等等。

2. 动态组件渲染：根据 $route 中的数据（比如 name 或 params），可以实现动态加载不同的组件或内容。

3. 导航守卫：虽然 $route 本身不直接用于导航控制，但它可以在导航守卫（如 beforeEach、beforeEnter）中被用来判断是否允许用户进行特定的导航动作。

2. $router 对象

• 描述：$router 是路由器实例，是整个应用路由系统的管理者。
• 方法：提供了如 push(), replace(), go(), back(), forward() 等方法来进行页面间的导航。
• 配置：可以通过这个对象访问路由的配置信息，并且可以添加动态路由或者监听路由变化。

• $router 的用途

1. 编程式导航：利用 $router.push()、$router.replace()、$router.go() 等方法，你可以在代码中实现页面间的跳转。

2. 修改历史记录：可以通过 $router 的方法向浏览器的历史栈中添加或替换记录。

3. 监听路由变化：尽管通常我们会直接监听 $route 对象的变化，但 $router 提供了钩子函数（如 afterEach），这些钩子可以在每次导航完成后执行某些逻辑。

4. 全局/局部导航守卫：$router 允许设置全局或针对单个组件的导航守卫，以便在进入或离开某个路由之前执行特定的检查或准备工作。

// 导航到新页面
this.$router.push({ name: 'user', params: { userId: 123 } });

// 替换当前页面而不添加历史记录
this.$router.replace('/home');

// 返回上一页
this.$router.go(-1);