改造之前,侧边栏刷新高亮丢失,用的是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)
};