vue3动态路由及菜单

Posted 2022-12-19 左直拳

一般来说，前端项目中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册。

具体如何实现呢？思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。这其中，可能会出现默认路由与动态路由有重叠的情况。处理办法是覆盖。数据结构方面，菜单与路由数据二合一。

一、项目结构

这是我们一个项目的公共框架的代码结构。我们打算在src/modules/存放具体业务系统的代码，而外部是相对稳定，可以复用的框架代码。

二、默认路由

src/router/default.js，内容比较少，只有登录、首页、404三个。其余全都靠动态注册。

路由项中，自定义属性放在meta里。动态路由与默认路由的数据结构一致。

/**
 * 默认路由
 * 具体业务路由，应在src/modules/router里定义，或者从后端动态加载
 */
export default [
  /**
   * 路由项结构：
   *
      path: "/",//路径，（必选；path、name、component是路由规定必选的元素）
                  也可以带参数，如 path: "/resource/detail/:id",
      name: "路由名称，是路由唯一标识",（必选）
      component: 指向组件，如 Home,或者() => import("../views/login/PageIndex.vue")，（必选）
      meta: //meta里的属性可以自定义，全部为可选项
        text: "名称",//展示在菜单里，（可选）
        navi: true, //导航条(一级菜单)，（可选）
        noLogin: true, //无须登录即可浏览，（可选）
        access: "work:sysmanage,work:resourcemanage",//权限标识，（可选）
      ,
      children: [],
    ,
   */
  
    path: "/login",
    name: "login",
    component: () => import("../views/login/PageIndex.vue"),
    meta: 
      noLogin: true, //无须登录即可浏览
    ,
  ,
  
    path: "/",
    name: "Home",
    component: () => import("../views/PageIndex.vue"),
  ,
  
    path: "/notAllow",
    name: "notAllow",
    component: () => import("../views/sys/notAllow.vue"),
  ,
];

export const HomeName = "Home";

三、动态注册

注册的时机是什么？在哪里注册？怎么注册？

答曰：登录之后注册；在路由守卫里注册；用router.addRoute()一个个加进去。

1、登录之后进行注册，在路由卫士里注册

所谓路由守卫，就是路由规则。这名字我是从网上抄过来的。

src/router/index.js

import  createRouter, createWebHashHistory  from "vue-router";
import routes from "./default";
import routeAssembler from "./setup";
import  hasAuthority  from "@/utils/login.js";

const router = createRouter(
  history: createWebHashHistory(),
  routes,
);

// 路由守卫
let registerRouteFresh = true;//是否还没有动态加载过
router.beforeEach((to, from, next) => 
  const isLogin = localStorage.isLogin ? true : false;
  if (isLogin) 
    //已登录情况下验证权限
    let isAccess = hasAuthority(to.meta.access);
    if (!isAccess) //没有权限
      next("/notAllow");
      return;
    
    if (registerRouteFresh) //还没有动态加载过
      //动态注册路由 <----------------------------------------
      routeAssembler(router);
      registerRouteFresh = false;
      next( ...to, replace: true );
     else 
      //已经登录了，不能再打开登录页
      to.path === "/login" ? next("home") : next();
    
   else 
    //如果无须登录则直接打开，否则转向登录页面
    to.meta.noLogin || to.path === "/login" ? next() : next("/login");
  
);

export default router;

2、如何动态注册
src/router/setup.js，即上面例子中的routeAssembler：

/*
  装配路由及菜单
 */
import fixItems from "./default"; //默认路由
import  HomeName  from "./default"; //统一命名首页路由项（参考前面的默认路由）
import projectItems from "@/modules/router"; //具体业务系统的路由

export default (router) => 
  //获得动态路由
  const dynaItems = getDynamicItems();

  //对齐首页(统一命名首页)
  adpatHome(HomeName, dynaItems);

  //添加动态路由
  dynaItems.forEach((value) => 
    router.addRoute(value);
  );
;

const getDynamicItems = () => 
  /*
    获取动态路由，从指定文件加载或从后端获取
  */
  return projectItems;
;

//默认路由与业务路由对齐首页的路由信息
//所谓对齐，就是大家的name保持一致，这样才能保证动态加入的路由项，覆盖掉前面的path和name相同的路由
const adpatHome = (HomeName, dynaItems) => 
  let home = dynaItems.filter((item) => 
    return item.path === "/";
  );
  if (home.length > 0 && home[0].name !== HomeName) 
    /**
     * 如果业务路由定义了首页，但其name与默认路由首页的name不相同
     * 则将业务路由中首页项的name置为默认名称
     * 因为按照vue-router的规则，addRoute的时候，如果存在同名同路径的路由项，则覆盖之
     * 我们要的就是覆盖默认，以业务路由设置为准
     */
    home[0].name = HomeName;
  
;

这里面有个如果动态路由，与默认路由中存在相同的路由项，该如何处理的问题。

按照vue3的router规则，如果后面加进来的路由项，仅仅是path相同，而name不同，则不算是相同的路由项，addRoute()进去之后，仍然是原先的路由项起作用；但如果是path和name都相同，则原先的会被覆盖（我怀疑是name相同就会被覆盖）。所以，默认路由中有首页路由，指向框架代码中的默认首页；加载动态路由后，该路由被覆盖，指向了具体业务系统的首页。这也表明，我们无须自己手动删除已加载的同名路由项。事实上，删除还会报错。

相关文章：
不依赖框架用vue3空白项目从头打造一个过得去的前端