📒 笔记文档

第一层App.vue中的

第二层layout.vue

看routes中layout下面的子路由，children这才是正儿八经的第二层路由。路由嵌套的正确执行方式。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: () => import('@/layout/index.vue'),
      redirect: '/home', // 访问根目录时默认重定向到 home
      children: [
        {
          path: 'home',
          name: 'home',
          component: () => import('@/views/home/index.vue'),
        }
      ]
    },
    { 
      path: '/:pathMatch(.*)*',
      name: '404', 
      component: () => import('@/views/404/index.vue') 
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('@/views/register/index.vue'),
    },
  ],
})

代码

app.vue

<script setup lang="ts">

</script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>

layout/index.vue

<template>
  <div class="app-wrapper">
    <el-container class="layout-container">
      <!-- 左侧边栏 -->
      <el-aside width="220px" class="sidebar-container">
        <div class="logo">
          <h2>SaaS RBAC Admin</h2>
        </div>
        <el-menu
          default-active="/home"
          class="el-menu-vertical"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          router
        >
          <el-menu-item index="/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/role">
            <el-icon><Setting /></el-icon>
            <span>角色管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧主体内容 -->
      <el-container class="main-container">
        <!-- 顶栏 -->
        <el-header class="header">
          <div class="header-left">
            <!-- 占位，可放折叠侧边栏按钮或面包屑 -->
            <span>后台管理系统</span>
          </div>
          <div class="header-right">
            <!-- 占位，可放用户头像、下拉菜单等 -->
            <el-dropdown>
              <span class="el-dropdown-link">
                管理员 <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容展示区 -->
        <el-main class="app-main">
          <!-- 针对layout的子路由嵌套 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>