vue element-ui 侧边栏刷新高亮丢失问题解决

改造之前，侧边栏刷新高亮丢失，用的是rooter-link包裹，代码如下

    <el-menu
      class="el-menu-vertical-demo"
     >
        <router-link to="/home/index">
       <el-menu-item index="1">
        <i class="el-icon-s-platform"></i>
        <span slot="title">数据统计</span>
      </el-menu-item>
        </router-link>
         <router-link to="/CorporateManagement/Gongsiguanli">
       <el-menu-item index="2">
        <i class="el-icon-office-building"></i>
        <span slot="title">公司管理</span>
      </el-menu-item>
        </router-link>
      <router-link to="/JieKouGL/InterfaceManagement">
       <el-menu-item index="3">
        <i class="el-icon-s-operation"></i>
        <span slot="title">接口管理</span>
      </el-menu-item>
        </router-link>
    </el-menu>

改造之后，侧边栏刷新高亮不丢失，如果还用router-link，利用element-ui的默认路由，筛选的话，比较麻烦，偶然间发现了router模式，只需要给el-menu开启router模式，把router-link标签上的path赋值给el-menu-item的index，然后把router-link标签清除即可实现刷新不丢失高亮的问题，代码如下

 <el-menu
      class="el-menu-vertical-demo"
      :default-active="$route.path" 
        router>
       
       <el-menu-item index="/home/index">
        <i class="el-icon-s-platform"></i>
        <span slot="title">数据统计</span>
      </el-menu-item>


       <el-menu-item index="/CorporateManagement/Gongsiguanli">
        <i class="el-icon-office-building"></i>
        <span slot="title">公司管理</span>
      </el-menu-item>


       <el-menu-item index="/JieKouGL/InterfaceManagement">
        <i class="el-icon-s-operation"></i>
        <span slot="title">接口管理</span>
      </el-menu-item>

    </el-menu>

直到上面的话可能还会出现重复点击侧边栏出现报错的情况

需要在router文件中的index.js中加入以下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
};