根据预处理完毕的数据进行菜单渲染

  1. <el-row class="tac">
  2.   <el-col :span="24">
  3.     <h5 class="mb-2">Default colors</h5>
  4.     <el-menu  class="el-menu-vertical-demo">
  5.       <el-sub-menu :index="menu.id + ''" v-for="(menu) in newMenus" :key="menu.id">
  6.         <template #title>
  7.           <span>{{menu.title}}</span>
  8.         </template>
  9.         <template v-for="(subMenu) in menu.children" >
  10.           <el-menu-item v-if="!subMenu.hidden" :key="subMenu.id">{{subMenu.title}}</el-menu-item>
  11.         </template>
  12.       </el-sub-menu>
  13.     </el-menu>
  14.   </el-col>
  15. </el-row>

hidden字段决定了二级菜单的展示与否，因此使用v-if去控制二级菜单
但是v-for和v-if不能同时使用，则借助template

:index=”menu.id + ‘’” 是因为子菜单的展示的名称必须是字符串类型，进行强制数据类型转换

但是现在遇到新问题？每个二级菜单都可以同时展示
项目需求应该是点开某个二级菜单时，其他二级菜单全部收起来。

找到elementPlus文档
image.png
给菜单添加上 :unique-opened=”true” 实现单一子菜单打开
考虑后续会添加路由，因此也加上属性

全局前置导航守卫

现在的问题是，刷新页面后，菜单的数据依然会丢失
使用全局前置导航守卫解决这一点，在每一次进入页面前都查询是否有token，并且查询menus是否为空（长度为0），如果是，则发送请求重新获取数据
顺便安装nprogress
yarn add nprogress
yarn add @types/nprogress -D 

  1. import router from '../../router'
  2. import nProgress from 'nprogress'
  3. import 'nprogress/nprogress.css'
  4. import { useUserStore } from '..'
  5. import Cookies from 'js-cookie'
  6. import { getAdminInfoApi } from "../../request/api";
  9. nProgress.configure({
  10.   showSpinner: false
  11. })
  13. // 全局前置守卫
  14. router.beforeEach(async (to, from) => {
  15.   nProgress.start()
  17.   const User = useUserStore();
  18.   const token = Cookies.get('token');
  19.   if(token && User.menus.length === 0){
  20.     const res = await getAdminInfoApi();
  21.       if (res.code === 200) {
  22.         User.menus = res.data.menus;
  23.         console.log(User.menus);
  24.       }
  25.   }
  26.   return true
  27. })
  29. // 全局后置钩子
  30. router.afterEach(() => {
  31.   nProgress.done(true)
  32. })

需要在main.ts里引入

二级路由规则

首先，点击菜单某一项后需要进行跳转，但是注意，跳转后，依然需要左侧菜单栏存在。
其路由规则如下：

  1. {
  2.   path: '/pms',
  3.     name: 'pms',
  4.     component: () => import('../views/home/home.vue'),
  5.     children:[
  6.     {
  7.       path: 'addProduct',
  8.       name: 'addProduct',
  9.       component: () => import('../views/pms/addProduct.vue')
  10.     }
  11.   ]
  12. }

因此一级路由的组件依然是home组件
二级路由才是一个新的具体的vue组件
需要在home中设置路由出口
image.png
效果
image.png

如果按这样的方式写固定的路由，代码臃肿且不利于维护
需要动态生成路由
在全局路由前置守卫里动态生成路由

  1. if (token && User.menus.length === 0) {
  2.     const res = await getAdminInfoApi();
  3.     if (res.code === 200) {
  4.       User.menus = res.data.menus;
  5.     }
  7.     //循环菜单，生成并注册动态路由
  8.     const menus = User.getNewMenus;
  9.     for(let key in menus) {
  10.       const newRoute: RouteRecordRaw ={
  11.         path: '/'+menus[key].name,
  12.         name: menus[key].name,
  13.         component: () => import('../../views/home/home.vue'),
  14.         children:[]
  15.       };
  16.       for(let i = 0;i<menus[key].children.length;++i){
  17.         newRoute.children?.push({
  18.           path: menus[key].children[i].name,
  19.           name: menus[key].children[i].name,
  20.           component: () => import(`../../views/${menus[key].name}/${menus[key].children[i].name}.vue`)
  21.         })
  22.       }
  23.       router.addRoute(newRoute)
  24.     }
  25.   }

router.addRoute(newRoute)可以添加路由

借助开发者工具查看生成的路由
image.png

重定向

考虑当用户登录完之后，直接跳转到首页。
因此路由里需要添加“首页”，但是得在登录完成之后
同样在全局路由守卫里添加

  1.     //动态添加首页
  2.     const route: RouteRecordRaw= {
  3.       path: "/",
  4.       name: "home",
  5.       component: () => import("../../views/home/home.vue"),
  6.       redirect: "/index",
  7.       children: [
  8.         {
  9.           path: "index",
  10.           name: "index",
  11.           component: () => import("../../views/index/index.vue"),
  12.         },
  13.       ],
  14.     }
  15.     router.addRoute(route)

使用重定向，访问/时也跳转到/index
同理，在访问一级菜单时，直接使其跳转到二级菜单路由

解决刷新之后页面空白问题

本质是一位路由守卫的机制
进入路由守卫后，进行了token和menus长度判断，if判断式，但是没有考虑到不需要判断的情况
综上，对路由守卫进行升级

  1. router.beforeEach(async (to, from,next) => {
  2.   nProgress.start();
  4.   const User = useUserStore();
  5.   const token = Cookies.get("token");
  6.   if (token && User.menus.length === 0) {
  7.     const res = await getAdminInfoApi();
  8.     if (res.code === 200) {
  9.       User.menus = res.data.menus;
  10.     }
  12.     //循环菜单，生成并注册动态路由
  13.     const menus = User.getNewMenus;
  14.     for (let key in menus) {
  15.       const newRoute: RouteRecordRaw = {
  16.         path: "/" + menus[key].name,
  17.         name: menus[key].name,
  18.         component: () => import("../../views/home/home.vue"),
  19.         redirect: "/" + menus[key].name + "/" + menus[key].children[0].name,
  20.         children: [],
  21.       };
  22.       for (let i = 0; i < menus[key].children.length; ++i) {
  23.         newRoute.children?.push({
  24.           path: menus[key].children[i].name,
  25.           name: menus[key].children[i].name,
  26.           component: () =>
  27.             import(
  28.               `../../views/${menus[key].name}/${menus[key].children[i].name}.vue`
  29.             ),
  30.         });
  31.       }
  33.       //动态生成菜单路由
  34.       router.addRoute(newRoute);
  35.     }
  36.     //动态添加首页
  37.     const route: RouteRecordRaw= {
  38.       path: "/",
  39.       name: "home",
  40.       component: () => import("../../views/home/home.vue"),
  41.       redirect: "/index",
  42.       children: [
  43.         {
  44.           path: "index",
  45.           name: "index",
  46.           component: () => import("../../views/index/index.vue"),
  47.         },
  48.       ],
  49.     }
  50.     router.addRoute(route);
  51.     next(to.path)
  52.   }else{
  53.     next()
  54.   }
  55. });

使用next，让登录成功的用户得以继续访问

守卫的小bug

已经登录且token有效的情况下，不应该允许去往登录页
token失效的情况下，必须跳转到登录页

  1. router.beforeEach(async (to, from,next) => {
  2.   nProgress.start();
  4.   const User = useUserStore();
  5.   const token = Cookies.get("token");
  6.   if (token && User.menus.length === 0) {
  7.     const res = await getAdminInfoApi();
  8.     if (res.code === 200) {
  9.       User.menus = res.data.menus;
  10.     }
  12.     //循环菜单，生成并注册动态路由
  13.     const menus = User.getNewMenus;
  14.     for (let key in menus) {
  15.       const newRoute: RouteRecordRaw = {
  16.         path: "/" + menus[key].name,
  17.         name: menus[key].name,
  18.         component: () => import("../../views/home/home.vue"),
  19.         redirect: "/" + menus[key].name + "/" + menus[key].children[0].name,
  20.         children: [],
  21.       };
  22.       for (let i = 0; i < menus[key].children.length; ++i) {
  23.         newRoute.children?.push({
  24.           path: menus[key].children[i].name,
  25.           name: menus[key].children[i].name,
  26.           component: () =>
  27.             import(
  28.               `../../views/${menus[key].name}/${menus[key].children[i].name}.vue`
  29.             ),
  30.         });
  31.       }
  33.       //动态生成菜单路由
  34.       router.addRoute(newRoute);
  35.     }
  36.     //动态添加首页
  37.     const route: RouteRecordRaw= {
  38.       path: "/",
  39.       name: "home",
  40.       component: () => import("../../views/home/home.vue"),
  41.       redirect: "/index",
  42.       children: [
  43.         {
  44.           path: "index",
  45.           name: "index",
  46.           component: () => import("../../views/index/index.vue"),
  47.         },
  48.       ],
  49.     }
  50.     router.addRoute(route);
  51.     next(to.path)
  52.   }else{
  53.     if(token && to.path === '/login'){
  54.       next(from)
  55.     }else if(!token && to.path !== '/login'){
  56.       next('/login')
  57.     }else next()
  58.   }
  59. });