vue中this.$router.push()跳轉導緻頁面重新整理導航欄active不改變問題解決~！

前言

寫vue項目中遇到了導航欄綁定的active不改變，路由正常跳轉了結果導航欄顯示還是第一個。

于是我就開始排錯，發現每次路由跳轉，導航欄綁定的activeNum都被重新整理掉歸0了，也就是顯示第一個。剛開始确實好久沒發現問題，以前也是這麼寫的沒出過問題。

轉機

後來我想是不是因為，這個導航欄是在router-view跳轉的子元件中的原因，頁面跳轉的時候将整個子元件都重新整理了，表面上看是子元件中的子元件重新整理（相當于孫子級别的元件重新整理），其實跳轉的時候是重新整理的整個子元件。

解決

然後我就在子元件的導航欄中created下加了方法，每次重新整理完了的話調用超熱created中的方法擷取路由，然後再拿擷取到的路由去和導航欄對應的路由進行比對，擷取到對應的索引再給activeNum指派！就這樣成功的解決啦！！！

總結

在路由跳轉的時候如果是如果有多個層級的路由，那麼出了第一個層級路由的父元件不會重新整理以外，其他層級的路由都會将整個子元件重新整理。如果想解決的話也可以嘗試用keep-alive解決問題（ps：我沒試過）

放一下解決的代碼

created() {
        this.navBarItem.forEach((item,index) => {
            //檢測目前路由路徑  然後跳轉到對應的item
            if(decodeURI(this.$route.path).search(item.path) != -1) {
                this.activeNum = index;
            }
        })
    },