导航栏点击进入路由跳转详情页导航样式失效
el-menu解决导航样式失效的问题
项目问题：两个同级的导航栏页面，一个主页面(/text)，一个详情页(/detail 导航栏false隐藏)， 当点击进入详情是路由跳转/detail，所以/text的导航样式失效
解决办法：进行路由拦截判断，保留样式
导航栏代码
<template>
<div >
<el-menu
class="sidebar-menu"
:default-active="Routes"
background-color="#fff"
text-color="#000"
router
>
</el-menu>
</div>
</template>
利用计算属性进行更改
export default {
name: ,
setup() {
const Routes = computed(() => {
if (route.path === /text || route.path === /detail) {
return /text
} else {
return route.path
}
})
return {
onRoutes
}
},
//这样路由跳转到详情页,主页面就会保持原有的样式
}
