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

 

posted @ 2020-08-05 14:06  少哨兵  阅读(3906)  评论(0编辑  收藏  举报