vue + element navigation click without losing color

逛了一圈论坛，发现都是复制粘贴的，好多都是用 sessionStorage 做的。

Refer to the post: sessionStorage realizes click navigation without losing color.
At that time, I also did it in this way. When I did it, there was no problem, but when I tested it, the problem was big.
The first problem is that when there are more pages, you have to save this state while jumping. For example, page A has 1 2 3 navigation, and you click 1 to navigate to page B. No problem at this time.
Because you have saved a state of 1 when you are on page A, when you jump back to page A from page B, 1 is no problem.
However, when you jump from the B page to the CDFG page, after multiple routing jumps, you finally reach the G page, but when required, there is a button on the G page to jump back to the 2 navigation of the A page.
At this time, you are not stupid. You think, hey, then I can save the state every time I jump. The trouble is the trouble, but the ultimate goal can be achieved. I thought so too, it was Too Young Too Simple.
Why, because the button on the page that you really have no problem, but the problem will be outside the page, ah, look at the page with the user's browser, most of what is left on top of the browser? Is forward and backward ah Hello, How do you save the state when you click these two buttons, whether there is a big E, people are stupid, and can only change them all.
Oh, by the way, this solution works fine on your own computer. You share page B with your good friends when you are on page B. When you return to page A from page B, you will find out, oh, why there is no navigation Is it active? Ok? Ok? Ok? (This situation can also be solved by jumping and adding storage status, you are happy to add it slowly, and if you can use it, I will lose)

The final plan is as follows:

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 + '';
        }
}

Directly monitor the route and change the activation state of the navigation when the route is changed. You don’t need to store the state when you click like in solution 1, and no matter whether it’s forwarding or backward, sending the webpage to others, it’s no problem. Xiaobai must have skills. This method is good, who knows who uses it, hehe.