Vue.js 中的 $router 和 $route

在 Vue.js 中，$router 和 $route 是两个常用的对象，用于处理路由相关的操作。在本文中，我们将介绍 $router 和 $route 的区别，并且演示如何使用它们。

在这里插入图片描述

$router 和 $route 的区别

在 Vue.js 中，$router 和 $route 分别代表了路由器和当前路由。虽然它们都与路由相关，但是它们的作用不同。

$router

$router 是 Vue.js 中的路由器对象，用于管理路由。它包含了许多方法，例如 push、replace、go 等等，用于在路由之间进行导航。下面是一些常用的方法：

push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void：跳转到一个新的页面，会向 history 栈添加一个新的记录；
replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void：跳转到一个新的页面，不会向 history 栈添加一个新的记录，而是替换当前的记录；
go(n: number): void：在 history 栈中向前或向后移动 n 步；
back(): void：向后退一步，相当于 go(-1)；
forward(): void：向前进一步，相当于 go(1)。

除了上述的方法以外，$router 还有一些其他的属性和方法，例如 currentRoute、beforeEach、afterEach 等等。这些属性和方法可以让我们更加方便地管理路由。

$route

$route 是 Vue.js 中的当前路由对象，用于获取当前路由的信息。它包含了许多属性，例如 path、params、query、hash 等等，用于描述当前路由的状态。下面是一些常用的属性：

path：当前路由的路径；
params：当前路由的参数，例如 /user/:id 中的 id；
query：当前路由的查询参数，例如 /user?id=123 中的 id；
hash：当前路由的哈希值，例如 /user#profile 中的 profile。

除了上述的属性以外，$route 还有一些其他的属性和方法，例如 name、meta、fullPath 等等。这些属性和方法可以让我们更加方便地获取当前路由的信息。

示例代码

下面是一个完整的示例代码，演示了如何使用 $router 和 $route。在该示例中，我们定义了两个路由，分别是 /home 和 /about，并且使用了 $router 和 $route 来管理路由和获取路由信息。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Current route: {{ $route.path }}</p>
    <ul>
      <li>
        <router-link to="/home">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js Router Demo',
    };
  },
};
</script>

在上面的代码中，我们使用了 <router-link> 组件来定义两个路由链接，分别是 /home 和 /about。当用户点击链接时，会自动跳转到相应的页面，并且更新 $route 对象的相关信息。在 <router-view> 组件中，我们使用了嵌套路由，根据当前路由显示不同的组件。

下面是关于 $router 和 $route 的一些常用操作：

// 跳转到一个新的页面
this.$router.push('/home');

// 替换当前页面
this.$router.replace('/about');

// 向前退一步
this.$router.back();

// 向前进一步
this.$router.forward();

// 获取当前路由的路径
console.log(this.$route.path);

// 获取当前路由的参数
console.log(this.$route.params.id);

// 获取当前路

路由的查询参数
console.log(this.$route.query.id);

// 获取当前路由的哈希值
console.log(this.$route.hash);