router/index 的值路由通过后台发送的数据进行添加

import Vue from 'vue';
import VueRouter from 'vue-router';
import login from '../views/login';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: login,
    meta : {
      title : "登录"
    }
  },
  {
    path: '/',
    name: 'layout',
    redirect : "/welcome",
    component: () => import('../components/Layout'),
    meta : {
      title : "首页"
    },
        children : [
      {
        path : "welcome",
        name : "welcome",
        component: () => import('../views/welcome'),
        meta : {
          title : "123"
        }
      },
              // {
      //   path : "/system/user",
      //   name : "user",
      //   component: () => import('../views/user'),
      // },
      // {
      //   path : "/system/menu",
      //   name : "menu",
      //   component: () => import('../views/menu'),
      // },
      // {
      //   path : "/system/role",
      //   name : "role",
      //   component: () => import('../views/role'),
      // },
      // {
      //   path : "/system/dept",
      //   name : "dept",
      //   component: () => import('../views/dept'),
      // },
      // {
      //   path : "/audit/leave",
      //   name : "leave",
      //   component: () => import('../views/leave'),
      // },
      // {
      //   path : "/audit/approve",
      //   name : "approve",
      //   component: () => import('../views/approve'),
      // },
      // {
      //   path : "/system/test",
      //   name : "test",
      //   component : () => import('../views/test'),
      // }
    ]
  },
];

const router = new VueRouter({
  routes,
});

export default router;

在utils文件夹先创建一个utils.js文本

/**
 * 将menu菜单的数据处理成路由表所需要的数据
 * @param menuList
 * @returns {*[]}
 */
function generateRoute(menuList){
  // 保存的过滤后的路由表数据
  let routes = []

  // 将菜单数据过滤路由表的方法，同时这个也是一个递归方法
  function deepList(list){
    // 菜单数据 [1,2]
    while(list.length){
        //返回并删除最后一个数据
      let item = list.pop()
      if(item.action){
          routes.push({
            path : item.path,
            meta : {
              title : item.menuName
            },
            name : item.component,
            component : item.component
          })
      }
      if(item.children && !item.action){
        deepList(item.children)
      }
    }
  }
  deepList(menuList)

  // 将过滤后的路由返回给generateRoute这个函数
  return routes
}

export default {
  generateRoute
}

新建一个permissions.js文件夹，用来写子路由和路由权限

//引入路由
import router from "./router"
//引入vuex
import store from "./store"
//引入左侧菜单的请求接口
import UserModel from "./api/user";
引入刚刚封装好的utils.js文件
import utils from "./utils/utils";

async function loadRouter(){
  // 获取、解析   UserModel.getPermissionList   请求方法 
  const {menuList} =await UserModel.getPermissionList()
  // 给./utils/utils发送数据
  const routes = utils.generateRoute(menuList)
   //循环遍历给router用addRouter()的方法添加路由
  routes.forEach((item,index)=>{
    //layout是父路由的名字  如果需要给某个子节点更新路由
    router.addRoute("layout",{
      path : item.path,
        //toLowerCase()的用法 定义toLowerCase() 方法用于把字符串转换为小写。返回值：一个新的字符串，其中大写字母全换成小写。
      name : item.name.toLowerCase(),
      meta : item.meta,
      component :  () => import(`./views/${item.component.toLowerCase()}`)
    })
  })
}

router.beforeEach(async (to,from,next)=>{
  const token = store.state.userInfo.token
  if(!token){
    if(to.path === "/login"){
      next()
    }else{
      next("/login")
    }
  }else{
    if(to.path === "/login"){
      next(from.path)
    }else{
      await next()
      await loadRouter()
    }
  }

  if(to.meta.title){
    document.title = to.meta.title
  }else{
    document.title = "123"
  }
})

最后在main.js里面引用

import “./permissions”

在左侧菜单页面用element ui组件

创建一个子组件 把数据发送到子组件里

    <el-menu
      :default-active="$route.path"
      background-color="#001529"
      text-color="#fff"
      router
      active-text-color="#ffd04b">

        <tree-menu :menuList="menuList"></tree-menu>

    </el-menu>

左侧菜单的请求数据

  computed : {
    menuList(){
      return this.$store.state.menuList || []
    }
  },
  components : {
    TreeMenu
  },
  created(){
    this.getMenuList()
  },
  methods : {
    async getMenuList(){
      const {menuList,actionList} = await UserModel.getPermissionList()
      this.$store.commit("saveMenuList",menuList)
      this.$store.commit("saveActionList",actionList)
    }
  }

vuex就不看了，就是把数据放到state就可以了

子组件用的是递归

<template>
  <ul>
    <template v-for="(item,index) in menuList">
      <el-submenu v-if="item.children && item.children.length > 0  && item.children[0].menuType === 1" :index="item.path"  :key="item._id">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.menuName}}</span>
        </template>
        <TreeMenu :menuList="item.children"></TreeMenu>
      </el-submenu>
      <el-menu-item :index="item.path"  v-else-if="item.menuType === 1">
        {{item.menuName}}
      </el-menu-item>
    </template>
  </ul>
</template>

<script>
export default {
  name: "TreeMenu",
  props : {
    menuList : {
      type : Array,
      default : []
    }
  }
}
</script>