vue-watch-routes:利用watch監聽routes來實現實時監聽頁面跳轉路由資訊,解決menu按鈕樣式重新整理重定向等問題
阿新 • • 發佈:2020-08-05
在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() }