vue-watch-routes:利用watch监听routes来实现实时监听页面跳转路由信息,解决menu按钮样式刷新重定向等问题
在vue项目中添加watch监听routes:
watch: {//动态监听路由变化 -以便动态更改导航背景色事件效果等
'$route' (to, from) {
// 对路由变化作出响应...
console.log('to.path----',to.path)//跳转后路由
console.log('from----',from)//跳转前路由
this.navSelect(to.path)
}
},
不管是刷新还是跳转都可获取路由的相信信息,跳转前后路由,根据信息即可解决导航样式不跟随事件(直接输入导航enter进别的页面)导致的默认导航事件(比如背景字体变色等)回到初始化
如果发现刷新的时候也出现此类问题,只要在导航控件内初始化时添加即可解决:例如
initNavbar(){//初始化如果手动输入路由,其它路径事件对应到指定路由导航事件
var initRouterPath = this.$route.path
this.navSelect(initRouterPath)
}
//导航点击
navSelect(nav){
this.$set(this.selectedKeys,0,nav)
// this.$store.commit('fnselectedKeys',nav)
// this.selectedKeys[0] = nav
},
mounted: function() {
this.initNavbar()
}

浙公网安备 33010602011771号