博客站

在 Vue.js 中，特别是使用 Vue Router 时，$route 和 $router 是两个非常重要的对象，但它们的作用和用途是不同的。以下是它们的主要区别：

$route

• 类型：一个对象

• 描述：$route 对象表示当前的路由状态信息。它包含了当前路由的一些详细信息，比如路径、查询参数、参数等。

• 包含的信息：

  • path：当前路由的路径，例如 /user/123
  • name：当前路由的名称（如果路由有名称）
  • query：包含查询参数的对象，例如 { foo: 'bar' }，对应 URL /page?foo=bar
  • params：包含动态片段和捕获参数的对象，例如 { userId: '123' }，对应 URL /user/:userId
  • hash：当前路由的 hash 值（如果 URL 中有 hash）
  • fullPath：当前路由的完整路径，包括查询参数和 hash
  • matched：一个数组，包含当前路由的所有嵌套路由记录
  • redirectedFrom：如果存在重定向，则会是重定向来源的路由信息
  • ...其他路由相关的元数据

• 使用场景：当你需要访问当前路由的信息时，比如获取查询参数或动态片段，你会使用 $route。

$router

• 类型：一个 VueRouter 实例

• 描述：$router 是 Vue Router 的实例，它包含了整个路由的功能和方法。你可以使用 $router 来导航到不同的 URL，或者手动修改路由状态。

• 提供的方法：

  • push(location, onComplete?, onAbort?)：导航到一个新的 URL，这个方法会向 history 栈添加一个新的记录。location 可以是一个字符串或一个描述目标位置的对象。
  • replace(location, onComplete?, onAbort?)：导航到一个新的 URL，但不会在 history 栈中留下记录。
  • go(n)：在 history 记录中前进或后退 n 个步骤。
  • back()：等同于 go(-1)
  • forward()：等同于 go(1)
  • addRoutes(routes)：动态添加更多的路由规则
  • getMatchedComponents(to?)：返回目标路由匹配到的组件数组
  • resolve(location, current?, append?)：解析目标位置（对象或字符串）为路由对象

• 使用场景：当你需要编程式地导航到不同的页面，或者修改路由状态时，你会使用 $router。

示例

假设你有一个 Vue 组件，你想在其中访问当前路由的查询参数，并导航到一个新的页面：

<template>
  <div>
    <p>当前查询参数：{{ queryParams }}</p>
    <button @click="goToHome">去首页</button>
  </div>
</template>

<script>
export default {
  computed: {
    queryParams() {
      return this.$route.query;
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/');
    }
  }
}
</script>

在这个例子中，queryParams 计算属性使用 $route 来获取当前路由的查询参数，而 goToHome 方法使用 $router 来导航到首页。

总结起来，$route 提供了当前路由的详细信息，而 $router 提供了导航和修改路由状态的方法。