vue 头部导航样式的设置（watch监听）

一开始用的 ：index 动态改变index值来激活每个li的样式,头部切换效果可以实现

	<el-menu-item  :index="indexF">
		<router-link to="/homePage">
			<div >首页</div>
		</router-link>
	</el-menu-item>
	<el-menu-item  :index="indexS">
		<router-link to="/translateNowPage">
			<div >首页</div>
		</router-link>
	</el-menu-item>	

但，登录之后，要求立即翻译处在激活状态，退出系统，要求首页处在激活状态，账号设置，我的处在在激活状态。这需要对每次的状态值进行保存并获取，我存在vuex中，有时会出现首页和立即翻译同时选中，等等其他多个li同时选中，实现起来比较麻烦。因此换了一种实现方式。

摒弃之前的用index实现激活状态的思路，通过点击事件动态给每个li设置样式,从而实现切换导航和登录
时li处在激活状态

	<el-menu-item  :class="activeClass ==1?'active':''" @click="navClick(1)">
		<router-link to="/homePage">
			<div >首页</div>
		</router-link>
	</el-menu-item>
	<el-menu-item  :class="activeClass ==2?'active':''" @click="navClick(2)">
		<router-link to="/translateNowPage">
			<div>立即翻译</div>
		</router-link>
	</el-menu-item>

	data() {
		return {
			activeClass:1
		}
	},
	methods:{
		//头部导航切换，激活样式
		navClick(m){
			this.activeclass = m;
		},	
	}

	.active {
		color: rgb(255, 255, 255)!important; 
		border-bottom-color: rgb(255, 255, 255)!important;
		background-color: rgb(0, 102, 255)!important;
	 }

此时，又出现一个新的问题

需求：当点击立即翻译时，立即翻译激活。但是，因为头部导航和下边内容是子父级路由关系，子级路由传值到vuex中，因为父级页面一直打开而无法触发created方法。所以我在父级页面用watch监听子级路由变化并判断触发条件，从而实现功能

	//账号设置点击事件
	accountSetting(){
		this.$router.push({path:'/myPoints', query: {key: 'account'}})
		this.indexStatus= 1;		//账号设置的状态
	},

	getIndex() {
		if(this.indexStatus== 1){				//账号设置
			this.activeclass = 4;
			this.indexStatus= ''	
		}else if(this.indexStatus== 2){		//退出系统
			_this.activeclass = 1;
		}else{
			this.activeclass = 2;		//立即翻译
		}
	},
	watch: {
		// 如果路由有变化，会执行该方法
		"$route": "getIndex"
	}