1. 程式人生 > 實用技巧 >vue-watch-routes:利用watch監聽routes來實現實時監聽頁面跳轉路由資訊,解決menu按鈕樣式重新整理重定向等問題

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