详解vue中$router和$route的区别

下面就是详解vue中$router和$route的区别的完整攻略：

什么是$router和$route

在Vue.js中，$router和$route都是Vue.js中管理路由的对象，用来实现路由跳转和管理当前路由状态的。

$router: 全局路由对象，包含整个路由的信息，例如：路由路径、路由参数、路由方法等。

$route: 当前路由对象，包含当前路由的信息，例如：当前路径、当前参数、当前方法等。

$router和$route的区别

区别主要有以下几个方面：

1.作用范围不同

$router对象是全局的路由对象，可以在Vue.js实例中通过this.$router来访问。而$route对象是当前路由对象，只能在组件中访问。

2.包含信息不同

$router对象包含整个路由的信息，包括路径、参数、方法等。而$route对象只包含当前路由的信息，主要包括路径、参数、方法等。

3.使用场景不同

由于$router对象包含整个路由的信息，通常在路由跳转中使用。而$route对象则主要用于获取当前路由的信息。

$router的使用示例

下面是一个简单的示例，用来说明$router对象的使用。

<template>
  <div>
    <button @click="home">Home</button>
    <button @click="about">About</button>
    <router-view></router-view>
  </div>
</template>

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

在这个示例中，通过this.$router.push()方法来实现路由跳转。

$route的使用示例

下面是一个简单的示例，用来说明$route对象的使用。

<template>
  <div>
    <h1>Current route is: {{$route.path}}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route); // 输出当前路由对象
  }
};
</script>

在这个示例中，通过{{$route.path}}来获取当前路由的路径信息。同时，也可以通过this.$route来访问当前路由对象，例如在created()钩子函数中输出当前路由对象。

综上所述，本文对vue中$router和$route的区别进行了详细分析，并通过两条示例说明了它们的使用方式和使用场景。