Vue-Router获取到的path一直是/?

问题

在app.vue里面获取this.$route.path获取到的一直是/

原因

// router 
const routes = [ {
   path: '',
   alias: '/home/:id',
   name: 'Home', component: () => import('@/views/Home.vue')
   // component: Home 同步加载就不会有问题 
} ] 
// App.vue中 
{ 
mounted () { 
  console.log('mounted', this.$route.path)
// mounted / 
} }

• 首先这个是跟同步组件还是异步组件是有关系的
• 因为异步组件的加载是异步的，所以当vue实例调用created、mounted的时候，vueRouter的里面的next还没执行，vueRouter的状态还没有切换，history的current还是START。所以在组件App.vue的mounted钩子函数里面拿到的path还是/。
• 如果你是在组件里面去取值，这个异步组件肯定已经出来了，路由更新也已经完成，就能获取到正确的path。

总结

路由匹配到异步组件时，，vueRouter的history下的current要保证组件加载成功才会切换状态。所以App.vue的mounted钩子只能获取到初始的route。

如果非得在App.vue获取到动态路由的值，可以加上时间函数。