我们在进行vue项目开发的时候,难免会用到vue-router,通过新建vue-rouer对象,能够方便我们对路由进行配置。
在使用的过程中经常需要使用this. $ router 和this.$route,如果没有弄清两者差别,容易给我们开发造成困难。
this. $router
其实 $router是我们创建的vue-router实例对象,包含我们创建的所有路由信息。
具体关于vue-router的信息可以查看官方文档
我们在router.js中通过创建vue-router实例,将其导出
const router = new VueRouter({
mode: 'history',
routes: Routes
})
export default router
然后在main.js中,创建vue实例
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
相当于
new Vue({
store: store,
router: router,
render: h => h(App)
}).$mount('#app')
这样我们就可以通过使用$ store和$router 访问vue中的store和router实例
this.$route
this.$route表示当前页面路由相关信息