vue + element 导航点击不失色

逛了一圈论坛，发现都是复制粘贴的，好多都是用 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 + '';
        }
}

直接监听路由，在路由改变的情况下，来改变导航的激活状态，不用像方案一那样在点击的时候再存储状态了，而且无论是前进后退，把网页发给别人，都没问题，真是入行小白必备技能呀。这方法好，谁用谁知道，嘿嘿。