Vue中$router与$route的区别详解

在Vue中，$router和$route两个属性经常被用到，但是它们又有什么区别呢？

$route

$route是Vue-Router中的一个对象，它包含了当前路由的信息，例如当前的路径、参数、query参数等。在组件中可以通过this.$route来访问。

下面通过一个示例来说明：

<template>
  <div>
    <h2>{{ $route.params.id }}</h2>
    <p>{{ $route.query.page }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params.id);
    console.log(this.$route.query.page);
  }
}
</script>

在上面的示例中，我们使用了$route中的params和query属性来获取当前的路由参数和query参数。这里需要注意的是，如果要使用params需要在路由配置中定义。

$router

$router是Vue-Router中的一个对象，它是Vue-Router的实例，可以通过它来实现编程式导航。例如跳转到另一个路由、返回上一个路由等。在组件中可以通过this.$router来访问。

下面通过示例来说明：

<template>
  <div>
    <button @click="goDetail()">跳转到详情</button>
    <button @click="back()">返回上一级</button>
  </div>
</template>

<script>
export default {
  methods: {
    goDetail() {
      this.$router.push({ name: 'detail', params: { id: 1 }, query: { page: 2 } });
    },
    back() {
      this.$router.go(-1);
    }
  }
}
</script>

在上面的示例中，我们使用了$router中的push方法来实现跳转到详情页，并且传递了路由参数和query参数。而在返回上一级的按钮中，我们使用了$router中的go方法来实现。这个方法可以传递一个数字作为参数，代表返回上几级，也可以传递一个字符串参数，代表跳转到指定的路由。

总结

• $route是用来获取当前路由信息的对象；
• $router是Vue-Router的实例，用来实现编程式导航；
• $route中包含了当前路由的信息，例如path、params、query等；
• $router中包含了导航方法，例如push、replace、go等。

通过以上示例和解释，我们可以深入理解$router和$route的区别。