一个菜单两个二级路由的搭建

效果如下,而且这是最上方的菜单,需要进入以后重定向。

TypeScript 复制代码
  {
    path: '/',
    name: 'HOME',
    component: ConsoleLayout, //这里也有router-view
    meta: {
      menu: false
    },
    redirect: {
      name: 'ManagerList'
    },
    children: [
      {
        path: '/rightsManage',
        name: 'RightsManage',
        component: () => import('@/views/AdminConsole/rightsManage/index.vue'),
        meta: {
          menu: true,
          title: '权限管理'
        },
        children: [
              {
              path: '/managerList',
              name: 'ManagerList',
              component: () => import('@/views/AdminConsole/rightsManage/manager.vue'),
              meta:
               {
                menu: true,
                title: '管理员列表'
               }
              },
              {
                path: '/operationLogs',
                name: 'OperationLogs',
                component: () => import('@/views/AdminConsole/rightsManage/operationLogs.vue'),
                meta:
                 {
                  menu: true,
                  title: '操作日志'
                 }
              },
           ]
        }
     ]
  },

注意,这里需要children里套children,index.vue里面的内容如下,需要给路由一个入口。

html 复制代码
<script setup lang="ts"></script>
<template>
  <router-view></router-view>
</template>
相关推荐
原则猫9 小时前
HOOKS 背后机制
前端
码语智行10 小时前
首页导航跳转功能深度解析-系统内和系统外
前端
阿猫的故乡10 小时前
Vue过渡动画从入门到装X:淡入淡出、滑动、列表动画、第三方库全搞定
前端·javascript·vue.js
IManiy11 小时前
总结之Vibe Coding前端骨架
前端
JS菌11 小时前
AI Agent 沙箱双层防护体系:从权限过滤到内核隔离的完整实现
前端·人工智能·后端
Aphasia31111 小时前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅11 小时前
前端如何竖屏固定视口背景
前端·javascript·面试
abcy07121311 小时前
python pandas csv异步后台清洗前端优先返回成功信息
前端·python·pandas
IT_陈寒12 小时前
Vite这个坑我帮你踩了,动态导入居然这样才生效
前端·人工智能·后端
swipe12 小时前
Mem0 x Agent 实战系列:分层记忆 + 三路召回,搭建真正可用的长期记忆层
前端·javascript·面试