(系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)

  • (系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
摘要

说明
    该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。

说明

    该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。

    该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。

    说明:OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。

友情提醒:本篇文章是属于系列文章,看该文章前,建议先看之前文章,可以更好理解项目结构。

qq群:801913255

有兴趣的朋友,请关注我吧(*^▽^*)。

(系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)

关注我,学不会你来打我

上篇回顾

在上一篇:(系列九)使用Vue3+Element Plus创建前端框架(附源码) 博客中,我们说道,使用vue3+element plus 创建项目,成功实现了布局组件container+菜单组件Menu搭建框架。

布局样式如下:

(系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)

然而我们只是实现了界面的搭建,并没有实现任何交互。

也因此有很多人在询问,如何做动态切换菜单。

我想说,不要慌,一切需求都会安排到位。

接下来我们就要实现菜单和路由的结合使用,做到动态切换菜单。

安装路由

命令:npm install vue-router

安装成功后,手动创建以下目录及文件

(系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)

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中配置路由,全局变量。

如下图:

(系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)

使用路由

做完以上步骤,接下来的工作就很简单了,我们只需要,在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">                 微信