vue+element后台管理系统 侧导航点击和刷新显示高亮的问题

最进用vue +element 写一个后台管理系统，遇到一个问题。需求是这样的，要求侧导航点击后跳转到路由，每点击的一项都要保持高亮状态，侧导航栏中，只能保证一个展开的窗口，还有就是刷新后，也要保证所对应路由的那个侧导航显示高亮。`

<template>
<div class="tab">
<el-row class="tac">
<el-col :span="6">
<el-menu class="el-menu-vertical-demo"  :default-active="currentMenu" router unique-opened>
<el-menu-item index="/home" class="mitem">
<!-- <a href="#/home"> -->
<i class="el-icon-menu"></i>
<span class="mspan">首页</span>
<!-- </a> -->
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title" class="mspan">委外订单</span>
</template>
<!-- <el-menu-item-group> -->
<el-menu-item class="mitem" index="/worder">工单管理</el-menu-item>
<el-menu-item class="mitem" index="/technology">工艺路线</el-menu-item>
<el-menu-item class="mitem" index="/pickup">提货单管理</el-menu-item>
<el-menu-item class="mitem" index="/qaorder">质检单管理</el-menu-item>
<el-menu-item class="mitem" index="/delivery">送货单管理</el-menu-item>
<!-- </el-menu-item-group> -->
</el-submenu>
<el-menu-item index="/question" class="mitem">
<i class="el-icon-menu"></i>
<span class="mspan">询价管理</span>
</el-menu-item>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-location"></i>
<span class="mspan">用户管理</span>
</template>
<!-- <el-menu-item-group> -->
<el-menu-item index="/manager">
人员管理
</el-menu-item>
<el-menu-item index="/role">
角色管理
</el-menu-item>
<!-- </el-menu-item-group> -->
</el-submenu>
<el-menu-item index="/processor" class="mitem">
<i class="el-icon-menu"></i>
<span class="mspan">加工商管理</span>
</el-menu-item>
<el-submenu index="6">
<template slot="title">
<i class="el-icon-location"></i>
<span class="mspan">工艺库管理</span>
</template>
<!-- <el-menu-item-group> -->
<el-menu-item index="/craft">
一级工艺管理
</el-menu-item>
<el-menu-item index="/crafttwo">
二级工艺管理
</el-menu-item>
<!-- </el-menu-item-group> -->
</el-submenu>
<el-menu-item index="/versions" class="mitem">
<i class="el-icon-menu"></i>
<span class="mspan">版本管理</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
</template>```
export default {
data () {
return {
currentMenu:'/home',
isCollapse: true
}
},
created(){
this.getUrl();
},
methods:{
getUrl(){
let _this = this;
// let currentUrl = window.location.href;
_this.currentMenu = `/${this.$route.path.split('/')[1]}`
console.log(`/${this.$route.path.split('/')[1]}`)
}
},
watch:{
$route(to,from){
console.log(to.path);
this.getUrl();
}
}
}

unique-opened  这个设置  是只显示展开一项。
index='url',这里index 对应的是跳转的路径。
用 watch 监听路由的变化情况，调用每次路径变化的方法，达到不管是否刷新 都可以显示高亮。