- A+
所属分类：Web前端
说明
该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255
有兴趣的朋友，请关注我吧(*^▽^*)。
关注我，学不会你来打我
上篇回顾
在上一篇：（系列九）使用Vue3+Element Plus创建前端框架（附源码） 博客中，我们说道，使用vue3+element plus 创建项目，成功实现了布局组件container+菜单组件Menu搭建框架。
布局样式如下：
然而我们只是实现了界面的搭建，并没有实现任何交互。
也因此有很多人在询问，如何做动态切换菜单。
我想说，不要慌，一切需求都会安排到位。
接下来我们就要实现菜单和路由的结合使用，做到动态切换菜单。
安装路由
命令：npm install vue-router
安装成功后，手动创建以下目录及文件
base-routes.ts 内容
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import Panel from '../../views/panel/index.vue'; export const routes: RouteRecordRaw[] = []; routes.push( { path: '/panel', component: Panel, name: "面板", }, { path: '/menu', redirect: '/menu/index', meta: { title: '菜单管理' }, name: "菜单管理", children: [ { path: '/menu', name: '菜单', component: () => import('../../views/menu/index.vue'), meta: { title: '菜单', requireAuth: true, affix: true, closable: false }, } ] }, { path: '/user', meta: { title: '用户管理' }, name: "用户管理", children: [ { path: '/user', name: '用户', component: () => import('../../views/user/index.vue'), meta: { title: '用户' }, }] }, ) //创建路由，并且暴露出去 const router = createRouter({ history: createWebHashHistory(), //开发环境 //history:createWebHistory(), //正式环境 routes }) export default router
该文件主要是配置菜单的json文件，及暴露路由。里面的属性应该不必多说，很容易看懂。
至于views文件夹中的vue文件内容，大家随便填写什么都可以，只要三个页面的内容不一样即可。
然后在main.ts中配置路由，全局变量。
如下图：
使用路由
做完以上步骤，接下来的工作就很简单了，我们只需要，在HelloWorld.vue（接上一篇文章代码），中修改代码如下
el-main中的内容替换为 <router-view></router-view>
el-menu中添加 router属性
然后导入base-routes.ts 文件，并添加如下代码
const menu = routes; return { menu, };
完整的HelloWorld.vue代码如下
<template> <div style="height: calc(100vh); overflow: hidden"> <el-container style="height: 100%; overflow: hidden"> <el-aside width="auto"> <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height: 100%" router > <div class="el-menu-box"> <div class="logo-image" style="width: 18px; height: 18px; background-size: 18px 18px" ></div> <div style="padding-left: 5px; padding-top: 7px"> OverallAuth2.0 </div> </div> <div v-for="menuItem in menu" :key="menuItem.path"> <el-sub-menu v-if="menuItem.children && menuItem.children.length" :index="menuItem.path" :key="menuItem.name" > <template #title> <el-icon><location /></el-icon>{{ menuItem.name }}</template > <el-menu-item v-for="subMenuItem in menuItem.children" :index="subMenuItem.path" :route="{ name: subMenuItem.name }" :key="subMenuItem.name" style="cursor: pointer" > {{ subMenuItem.name }} </el-menu-item> </el-sub-menu> <el-menu-item v-else :index="menuItem.path" :key="menuItem.path" :route="{ name: menuItem.name }" style="cursor: pointer" > {{ menuItem.name }} </el-menu-item> </div> </el-menu> </el-aside> <el-container> <el-header class="headerCss"> <div style="display: flex; height: 100%; align-items: center"> <div style=" text-align: left; width: 50%; font-size: 18px; display: flex; " > <div class="logo-image" style="width: 32px; height: 32px"></div> <div style="padding-left: 10px; padding-top: 7px"> OverallAuth2.0 权限管理系统 </div> </div> <div style=" text-align: right; width: 50%; display: flex; justify-content: right; cursor: pointer; " > <div class="user-image" style="width: 22px; height: 22px; background-size: 22px 22px" ></div> <div style="padding-left: 5px; padding-top: 3px"> 微信
