$router & $route

89 阅读1分钟

$router

任何一个组件中的$router 都是一样的,指的是该应用中的VueRouter实例对象

image.png

$route

当前活跃的路由对象

image.png

来源

为什么this.$能够获取到这些对象,这两个属性怎么存在的?并且这两个对象保存的是这些值?

因为我们下载的路由插件,需要通过Vue.use(VueRouter)在项目应用中安装,而Vue.use(plugin)默认执行的是 plugin.install(),我们通过查看plugin(这里指的是Vue-Router)的node_modules/vue-router/src/install.js 查看到其install方法主要做了如下的事情: image.png

  • 在Vue原型对象上通过增加routerrouter和route 属性,值为实例化Vue时传入的options的参数:实例化的Router 以及动态的活跃路由对象。
  • 全局注册RouterLink 和 RouterView 组件
  • 混入router的路由守卫相关API

image.png