$route 和 $router详解和区别

在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，用于管理应用的路由。尽管它们名称相似，但它们的作用和使用场景有所不同。下面是对它们的详解、区别以及示例代码。

1. $route

$route 是一个当前激活路由的对象。它包含了路由的 信息，比如当前的路径、路由参数、查询参数、路由名称等。$route 是只读的，你不能通过它来导航到另一个路由。

常见的 $route 属性

• path: 当前路由的路径字符串。
• params: 动态路径参数，例如 /user/:id 中的 id。
• query: 查询参数，例如 /user?id=123 中的 id。
• name: 当前路由的名称（如果有的话）。
• hash: 当前路由的 hash 值。
• fullPath: 完整的 URL 解析后的路径，包括 query 和 hash。
• matched: 一个数组，包含当前路由匹配的所有路由记录（route records）

<template>
  <div>
    <h2>当前路径: {{ $route.path }}</h2>
    <p>路由参数: {{ $route.params }}</p>
    <p>查询参数: {{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('当前路径:', this.$route.path);
    console.log('路由参数:', this.$route.params);
    console.log('查询参数:', this.$route.query);
  }
}
</script>

2. $router

$router 是整个应用的路由器实例，它包含了导航的方法和路由配置。你可以通过 $router 来编程式地导航到不同的路由，或是执行其他与路由相关的操作。

常见的 $router 方法

• push(location): 导航到一个新的路由。location 可以是一个字符串路径或者一个描述目标路由的对象。
• replace(location): 与 push 类似，但不会在导航历史中留下记录。
• go(n): 在浏览器历史记录中前进或后退 n 步。
• back(): 导航到上一个路由。
• forward(): 导航到下一个路由。
• beforeEach(callback): 注册一个全局前置守卫。
• afterEach(callback): 注册一个全局后置守卫。

<template>
  <div>
    <button @click="goHome">回到首页</button>
    <button @click="goBack">后退</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goBack() {
      this.$router.back();
    }
  }
}
</script>

3. 区别总结

• 作用不同:

  • $route 用于获取当前路由的 信息，如路径、参数等，是只读的。
  • $router 用于 导航 和控制路由的行为，是一个全局路由实例。

• 用法不同:

  • $route 常用于模板或组件中获取当前路由相关的信息。
  • $router 常用于编程式导航，例如在点击事件中跳转到另一个页面。

4. 实际场景

• 如果你只是需要读取当前路由的信息，例如显示当前的路径或根据路由参数显示不同的内容，使用 $route。
• 如果你需要在代码中主动地改变路由，例如点击按钮跳转到另一个页面，使用 $router。

希望能帮助你！