1.问题描述
页面中需要路由匹配给当前路由高亮,所以就需要获取当前路由的path,但是发现获取不到
mounted(){
console.log(this.$route)
}
在 mounted 中打印 $route:
获取到的值不对。path 和 fullPath ,明明应该有值,但只有一个 "/" 。
可能在 mounted 中router 的初始化还没有完成,所以取到的是一个初始默认值。
加一个延时试试:
mounted(){
setTimeout(() => {
console.log(this.$route);
}, 1000);
}
可以发现,有时能获取到,有时获取不到,延时到2000以后,目前测试的是都能获取到。
问题推测:
vue-router 初始化是需要一段时间的,在完成之前,取值只能拿到初始的默认值。
在 mounted 中 router 初始化可能还没有完成。
2.用onReady解决
上面用定时器延迟了1000ms,有时能取到 router,于是加长延时时间到2000解决,但是,真正要解决这个问题,肯定不能用定时器,因为延迟的时间无法确定:
长了,影响体验
短了,可能router初始化还没完成
查阅官网API,希望官方提供了初始化完成时的回调方法,果然找到了:onReady
this.$router.onReady(() => {
console.log(this.$route.path)
this.activeIndex = this.$route.path;
});
经测试,通过。