vue 根据用户权限，加载不同的路由，生成多级侧边栏

---

前言

第一次做根据不同权限，生成不同的路由，同时生成不同侧边栏，看了好多文章写的侧边栏只能嵌套两层，自己稍微改进了一下，可以无限嵌套。第一次写文章，写的不好，多提提意见啊！

一、为什么要生成不同路由？

有些人会问：为什么要生成不同路由，直接路由根据权限在侧边栏进行显示隐藏不就好了吗？
我的理解，在侧边栏显示隐藏的话就是把所有的路由注册了，虽然侧边栏没有了，但是用户还是可以通过直接在地址栏输入地址进行跳转，动态生成路由，只有有权限角色才可以访问，在地址栏输入无权查看的页面是无法跳转的，因为路由没有进行添加到

二、思路

我知道的目前，做动态路由的有两种思路：

第一种是后端直接返回路由表，这种后续有权限变化的话好调整，只需要后端进行操作就行了
第二种是前端写死路由表，里面设置路由和角色对应关系，不同权限角色登陆后对路由进行二次处理
我用的是第二种，这两种思路差别不大

三、详细步骤

配置路由

路由这块分成两类：公共页面（登录，404等页面）、私有路由（每个角色可以操作的页面）
我的路由配置在router文件夹写了两个js文件，一个叫index.js,另一个是routerData.js，index.js中进行路由挂载，routerData.js有路由数据，以及处理路由的方法

index.js代码

import Vue from "vue";
import Router from "vue-router";
import {
    commonRoute } from "./routerData";
//commonRoute 是公共路由
Vue.use(Router);

export default new Router({
   
  mode: "history",
  routes: commonRoute,
});

routerData.js代码块

这块逻辑稍微多一点

1、写入公共路由

export const commonRoute = [
  {
   
    path: "/login",
    component: () => import("@/view/login/Login.vue"),
    hidden: true,
    meta: {
    permission: [1, 2, 3] },
  },
];

2、写入所有路由

export const routerData = [
  {
   
    path: "/",
    redirect: "/homepage",
    hidden: true,
    meta: {
    permission: ["admin", "role"] },
  },
  {
   
    path: "/homepage",
    meta: {
    permission: ["role", "admin"] },
    redirect: "/homepage/home",
    component: "layout/Layout.vue",
    name: "home列表",
    children: [
      {
   
        path: "/homepage/home",
        name: "页面1",
        meta: {
   
          iconName: "",
          permission: ["role", "admin"],
        },
        component: "home/Home.vue",
      },
      {
   
        path: "/homepage/home2",
        name: "页面