el-menu 切换子路由的时候仍保持激活状态

使用element中的el-menu时候,我们使用路由高亮显示的时候,使用router 模式和default-active

当我们点击左侧菜单栏中的子路由时候,页面路由发生变化,左侧路由的选中状态就会消失,不会仍然保持选中。 我们可以通过route.matched来寻找当前子路由的上机路由,

route.matched含义是与给定路由地址匹配的标准化的路由记录数组。就是有几级就记录几级,根据自己路由情况来获取对应的路由

<el-menu
 :default-active="activeMenu"
  class="el-menu-vertical-demo"
  active-text-color="#007DED"
  router
 >
  <el-menu-item index='/menu'></el-menu-item>
</el-menu>
import {useRoute,onBeforeRouteUpdate} from 'vue-router'
const route = useRoute();
onMounted(()=>{
  activeMenu.value = route.matched[2].path //数组的下标需要根据自己的路由的等级来判断
})
​
onBeforeRouteUpdate((routeInfo)=>{
  activeMenu.value = routeInfo.matched[2].path
})
posted @ 2024-02-19 15:03  小不点灬  阅读(579)  评论(0编辑  收藏  举报