最进用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 监听路由的变化情况，调用每次路径变化的方法，达到不管是否刷新 都可以显示高亮。