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() }