vue3项目实战(四)---左侧导航菜单栏

一 、NarBar导航页面

1.1 layout文件夹下新建navbar文件夹，并在下面新建NavBar.vue文件

<template>
  <el-aside class="layout-menu">
    <!-- logo -->
    <div class="layout-logo">
      <img src="@/assets/vue.svg" />
      <p>v3后台管理系统</p>
    </div>
    <!-- 展示菜单 -->
    <!-- 滚动组件 -->
    <el-scrollbar class="layout-scrollbar">
      <!-- 菜单组件-->
      <el-menu default-active="2" class="el-menu-vertical-demo" router>
        <el-menu-item index="/index">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user/userList">
            <span>用户列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/system/dictList">
            <span>字典列表页面</span>
          </el-menu-item>
          <el-menu-item index="/system/roleList">
            <span>角色列表页面</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

    </el-scrollbar>
  </el-aside>
</template>
<script setup lang="ts">
import {
  User,
  House,
  Setting,
} from '@element-plus/icons-vue'



</script>

<style lang="scss" scoped>
.layout-menu {
  border-right: 1px solid #e4e7ed;
  width: $base-menu-width;
  background-color: $base-menu-background;
  .layout-logo {
    width: 100%;
    height: $base-menu-logo-height;
    color: white;
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
    p {
      color: white;
    }
  }

  .layout-scrollbar {
    width: 100%;
    height: calc(100vh - $base-menu-logo-height);
    .el-menu {
      border-right: none;
      background-color: $base-menu-background;
    }
  }
}
</style>

1.2 新建home页面下的children各个子页面，以及User.vue 和 System.vue

1.3 配置home页面下的children子页面路由

import {
  createRouter,
  createWebHashHistory,
  type RouteRecordRaw
} from 'vue-router'
import Home from '@/views/layout/index.vue'
import Index from '@/views/layout/index/index.vue';
import User from '@/views/user/User.vue'
import UserList from "@/views/user/userList/UserList.vue";
import System from '@/views/system/System.vue'
import DictList from "@/views/system/dictList/DictList.vue";
import RoleList from "@/views/system/roleList/RoleList.vue";

// 引入 login.ts
import LoginRouter from '@/router/modules/login.ts'


// RouteRecordRaw 内置的接口类型
const routes: RouteRecordRaw[] = [
  ...LoginRouter,
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home', // 布局页
    name: 'Home',
    component: Home,
    redirect:'/index',// 进入主页的时候重定向到Index页面
    children: [
      {
        path: '/index',
        name: 'index',
        component: Index
      },
      {
        path: '/user',
        name: 'user',
        component: User,
        children:[
            {
              path: '/user/userList',
              name: 'userList',
              component: UserList,
        }
        ]
      },
      {
        path: '/system',
        name: 'system',
        component: System,
        children:[
          {
            path: '/system/dictList',
            name: 'dictList',
            component: DictList,
          },
          {
            path: '/system/roleList',
            name: 'roleList',
            component: RoleList,
          }
        ]
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 导出路由
export default router

1.4 运行查看效果图