查了很多文档发现
解决方案一:
开启路由模式,标签中设置default-active
绑定 :default-active="$route.path"
发现不能完全解决我遇到的问题
于是,参考文档:https://blog.csdn.net/Jayne_z/article/details/88028336
综合得到第二套方案
解决方案二:
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
text-color="#333"
active-text-color="#00bf94">
<el-menu-item index="/index">首页</el-menu-item>
<el-menu-item index="/order">订单</el-menu-item>
<el-menu-item index="/product">我的产品</el-menu-item>
</el-menu>
data() {
return {
navConfig:{
'index':'/index',
'order':'/order',
'product':'/product'
},
activeIndex: '/index'
};
},
mounted(){
var href = window.location.href
href = href.split('#/')[1]
if(href.search('/')){
href = href.split('/')[0]
this.activeIndex = this.navConfig[href]
}else {
this.activeIndex = this.navConfig[href]
},