Vue3+vite+element Plus动态路由导航栏

记录下学习vue3的笔记，难免有不对的地方，老鸟轻喷。vue3,vite,element Plus 安装请自行参考官方文档element-plus和vue官网

使用npm 初始化一个project

# 设置npm 仓库地址为国内淘宝镜像，下载速度快
npm config set registry https://registry.npm.taobao.org

# 初始化相关配置
npm init vue@latest
✔ Project name: … hello-vue3
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? › No / Yes

npm install
# 启动
npm run dev

配置container布局

参考element文档中的布局container布局本次测试使用的是header-main上下布局删除默认生成的App.vue里面的全部内容，然后添加如下

<script lang="ts" setup>
import NavMenu from './components/NavMenu.vue'
</script>

<template>
  <div class="common-layout" id="app">
    <el-container class="el-header">
      <el-header>
        <el-affix position="top"> #导航栏浮动固定在页面上方
        <NavMenu></NavMenu>
        </el-affix>
      </el-header>

<!--      <el-main></el-main>-->
    </el-container>
    <router-view/>
  </div>
</template>

<style scoped>
.el-header {
  padding: 0; # 解决导航栏左右流空白问题
}
.el-main {
  padding:0;  #解决main板块距离header留空白问题
}
</style>

配置导航栏

参考element文档中的Navigation 导航在src/components/文件夹中新建vue文件，取名NavMenu.vue,完整路径为src/components/NavMenu.vue

<template>
  <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      unique-opened
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :ellipsis="false"
  >
    <el-menu-item index="0">ELEMENT-PLUS</el-menu-item>
    <div class="flex-grow" />
<!--    <el-menu-item index="0">Processing Center</el-menu-item>-->
<!--    <div class="flex-grow" />-->
    <template  v-for="item in $router.options.routes">
      <el-menu-item :index="item.path">
        <template #title>
          {{item.name}}
        </template>
      </el-menu-item>
<!--      <el-menu-item :index="item.children[0].path" v-else>-->
<!--        {{item.children[0].meta.menuName}}-->
<!--      </el-menu-item>-->
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>

修改App.vue，引用该导航栏

<script lang="ts" setup>
import NavMenu from './components/NavMenu.vue'
</script>
# 局部内容
  <el-container class="el-header">
      <el-header>
        <el-affix position="top"> #导航栏浮动固定在页面上方
        <NavMenu /> #这里加载导航栏组件
        </el-affix>
      </el-header>

<!--      <el-main></el-main>-->
    </el-container>

通过路由表动态加载导航栏菜单(一级，路由嵌套还未测试)

配置路由的ts文件，在路径src/router/index.ts，内容如下

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/welcome',
      name: 'welcome',
      component: () => import('../views/doWelcome.vue')
    }
  ]
})

export default router

1.NavMenu.vue修改el-menu配置

局部配置如下,更多的配置和配置介绍参考文档:
	<el-menu
      :default-active="$route.path" #active属性为route的path
      class="el-menu-demo"
      mode="horizontal"
      unique-opened
      router # 注入路由
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :ellipsis="false"
	  >

2.NavMenu.vue修改,使用v-for动态渲染导航栏

局部配置如下，嵌套子路由还未测试:
    <template  v-for="item in $router.options.routes">
      <el-menu-item :index="item.path">
        <template #title>
          {{item.name}}
        </template>
      </el-menu-item>
<!--      <el-menu-item :index="item.children[0].path" v-else>-->
<!--        {{item.children[0].meta.menuName}}-->
<!--      </el-menu-item>-->
    </template>

3.完整NavMenu.vue文件参考上面模块【配置导航栏】

总结

基于路由的动态导航栏配置步骤为,添加container布局–>配置和应用导航菜单–>配置好路由–>v-for遍历route的path和name，后续继续测试基于axios的全局request拦截和响应最终效果图如下：

Vue3+vite+element Plus动态路由导航栏