Vue router和route区别

在Vue.js中，路由是一个非常重要的概念。Vue提供了两个对象来实现路由功能：router和router和route。在使用Vue Router时，很多人会有疑问：router和router和route到底有什么区别？本文就来详细解释一下。

$router

$router是Vue Router的实例，包含了整个路由器的配置信息，可以理解为全局的路由控制器。它提供了一些方法和属性，比如push、replace和go等方法，用于改变URL，以及currentRoute、matched等属性，用于获取路由相关信息。

javascript复制代码
export default {
  methods: {
    goToPage() {
      // 使用$router.push来改变URL
      this.$router.push('/page')
    }
  }
}

$route是当前激活的路由对象，包含了当前URL解析得到的信息。也就是说，每次改变URL时，$route都会更新。

$route对象有很多属性，比如path表示当前路径，query表示查询参数，params表示动态路由参数，还有hash、fullPath等属性，可以根据具体需要来使用。

javascript复制代码
export default {
  created() {
    console.log(this.$route.path) // 输出当前路径
    console.log(this.$route.params.id) // 输出动态路由参数id
  }
}

综上所述，router是Vue Router的实例，提供了路由控制器的一些方法和属性，用于改变URL和获取路由相关信息。而router是VueRouter的实例，提供了路由控制器的一些方法和属性，用于改变URL和获取路由相关信息。而route是当前激活的路由对象，包含了当前URL解析得到的信息。

因此，它们之间最大的区别就在于作用范围：router是全局的，router是全局的，route是局部的。在使用时，需要根据具体需要来选择使用哪个对象。