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 @   少哨兵  阅读(4077)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示