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