技術標籤：問題解決

逛了一圈論壇，發現都是複製貼上的，好多都是用 sessionStorage 做的。

參考帖子：sessionStorage 實現 點選導航不失色
當時我也是按這種方法做的，做的時候沒問題，到測試時候問題就大了。
首先出現的問題就是，在頁面比較多的情況你得在跳轉的同時存上這個狀態，比如 A 頁面有 1 2 3 導航，你點 1 導航進入 B 頁面。這時候沒問題。
因為你在 A 頁面時候已經存了一個 1 的狀態，所以從 B 頁面跳回 A 時， 1 是沒問題的。
但是，你從 B 頁面跳到 C D F G 頁面時候，經過了多重路由跳轉，最終到了 G 頁面，但是需求時 G 頁面有個按鈕是跳回 A 頁面的 2 導航的。

這時候你人還沒傻掉，你想著，欸，那我在每個跳轉的時候在存下狀態不就行了嘛，麻煩是麻煩點，但也能實現最終的目標呀。我當時也是這麼想的，實在是 Too Young Too Simple。
為什麼呢，因為你頁面上的按鈕確實都沒有問題了，但是頁面外的會出問題啊，使用者看頁面是用的瀏覽器的，瀏覽器最左上面的是什麼? 是 前進 後退 啊喂，請問點這兩個按鈕的時候你怎麼儲存狀態，大E了有沒有，人都傻了，只能全部改掉了。
哦對了，這種方案你自己電腦執行沒毛病，你在 B 頁面時候把 B 頁面分享給你的好基友，你好基友從B 頁面返回 A 時候就會發現，哦豁，怎麼沒有導航啟用的狀態了？嗯？嗯？嗯？（此情況也可以通過跳轉加儲存狀態解決，你高興你慢慢加，加上了能用算我輸）

最終方案如下：

html

<el-menu  :default-active="menuActive">
	<el-menu-item index = ' firstRoute ' @click = " firstPage "> firstRoute <el-menu-item>
	<el-menu-item index = ' secondRoute ' @click = " secondPage "> secondRoute  <el-menu-item>
	<el-menu-item index = ' thirdRoute ' @click = " thirdPage "> thirdRoute <el-menu-item>
</el-menu>
 

js

// 首先設定預設的啟用的導航
private menuActive = 'firstRoute'

// 設定監聽路由
@Watch( '$route', { immediate: true } )
private routeChange() {
	 const arr = ['Knowledge', 'Cooperation', 'Collect', 'Dynamic', 'KnowEdit'];
     const otherArr = ['Search', 'EntityDetails'];
        if (arr.indexOf(this.menuActive) !== -1) {
            this.menuActive = 'MyNote';
        } else if (otherArr.indexOf(this.menuActive) !== -1) {
            this.menuActive = 'Home';
        } else {
            this.menuActive = this.$route.name + '';
        }
}

直接監聽路由，在路由改變的情況下，來改變導航的啟用狀態，不用像方案一那樣在點選的時候再儲存狀態了，而且無論是前進後退，把網頁發給別人，都沒問題，真是入行小白必備技能呀。這方法好，誰用誰知道，嘿嘿。