Vue中$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);

总结

在本文中，我们介绍了 Vue.js 中的 $router 和 r o u t e ，以及它们的区别。 route，以及它们的区别。route，以及它们的区别。router 是用于管理路由的对象，包含了许多方法和属性，用于在路由之间进行导航。$route 是用于获取当前路由信息的对象，包含了许多属性和方法，用于描述当前路由的状态。

为了更好地了解 $router 和 $route 的使用，我们演示了一个完整的示例代码，包含了路由链接、嵌套路由、路由导航等等。

到此这篇关于Vue中$router和$route的区别详解的文章就介绍到这了,更多相关Vue $router $route内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论