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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM