el-menu中两个不同的路由,一个隐藏,一个显示,点击跳转,选中状态不变

21 阅读1分钟

路由使用 /: 与 router.replace() 和el-menu使用default-active

 <el-menu class="menu" :default-active="activeMenu" :router="false" :collapse="false"   :collapse-transition="false">
     <SubMenu :menuList="menuList"></SubMenu>
</el-menu>
      {
        path: 'team',
        name: 'infoPreview.team',
        component: () => import('@/views/infoPreview/team/teaminfo.vue'),
        meta: {
          title: '团队信息查看' // 隐藏
        }
      },
      {
        path: 'team/:teamBusinessId',
        name: 'infoPreview.teamDetail',
        component: () => import('@/views/infoPreview/team/componets/detail.vue'),
        meta: {
          title: '团队详情页', //显示
          hidden: true
        }
      },
      
      
   const pathRegs: [RegExp, string][] = [
  [/\/indicators\/group\/[0-9a-zA-Z]+/, '/indicators/group'],
  [/\/infoPreview\/team\/[0-9a-zA-Z]+/, '/infoPreview/team'],
  [/\/expert\/evaluation\/[0-9a-zA-Z]+/, '/expert/evaluation']
]   
const activeMenu = computed(() => {
  let path = route.path
  for (let regArr of pathRegs) {
    path = path.replace(regArr[0], regArr[1])
  }
  return path
})