vue $route和 $router的区别

在Vue.js中，$route 和 $router 是两个不同的对象，它们提供了不同的功能和属性：

• $route：代表当前活动的路由信息，包括当前路由的路径、参数、查询等信息。
• $router：是 Vue Router 实例，它提供了一些导航功能，比如跳转到不同的路由、前进、后退等。

下面是一个例子，说明了它们之间的区别和用法：

// 在你的 Vue 组件中
export default {
  methods: {
    goToAboutPage() {
      // 使用 $router 导航到 /about 路由
      this.$router.push('/about');
    },
    logCurrentRoute() {
      // 访问当前活动路由的路径
      console.log('当前路由路径：', this.$route.path);
      
      // 访问当前路由的查询参数
      console.log('当前路由查询参数：', this.$route.query);
    }
  }
};

在这个例子中，goToAboutPage 方法使用了 $router.push() 方法来导航到了 /about 路由。这是 $router 对象的功能。

而 logCurrentRoute 方法则演示了如何使用 $route 对象来访问当前路由的路径和查询参数。this.$route.path 访问当前路由的路径，而 this.$route.query 则访问当前路由的查询参数。

简而言之，$router 是用来导航的，而 $route 则是用来访问当前路由信息的。