在后台管理系统中，如何根据后端返回的接口，来动态的设计路由呢，今天一片文章带你们解

1、在vuex中设置一个方法 拿到完整的路由数据

 

const state = {
      routerList: []
    };  

const mutations = {
dynameicMenu(state, payload) {
    // 第一步 通过glob 导入文件
    // const modules = import.meta.glob("../views/**/*.vue");
    const modules = import.meta.glob("../view/**/*.vue");
    function routerSet(router) {
      router.forEach(route => {
        // 判断没有子菜单，拼接路由
        if (!route.children) {
          const url = `../view${route.meta.path}/index.vue`;
          // 拿到获取的vue组件
          route.component = modules[url];
        } else {
          routerSet(route.children);
        }
      });
    }
    routerSet(payload);
    // 拿到完整的路由数据
    state.routerList = payload;
  }
}

2、我们在登录的时候，会将token，用户信息保存在localStorage中，而动态的路由是根据后端接口返回得来的，我们获取返回的信息，并将获取的数据传递到vuex

login({ ...loginForm }).then(({ data }) => {
  if (data.code === 10000) {
   ElMessage.success('登陆成功')
   // 将token保存到本地
   SET_TOKEN(data.data.token)
   localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
   // 根据权限动态设计路由
   menuPermissions().then(({ data }) => {
  store.commit('dynameicMenu', data.data)
   console.log(routerList)
  // 将一个响应式数据转为普通的路由数据
  toRaw(routerList.value).forEach(item => {
  router.addRoute('main', item)
  })
  // 跳转到首页
  router.push('/')
  })



  }
  })

3、将router.js中的路由删除，只留下基础的框架，将children中的数据删除，如图

// 创建路由对象
import { createRouter, createWebHashHistory } from "vue-router";
import Layout from "../view/Main.vue";
import Login from "../view/login/index.vue";

const routes = [
  {
    path: "/",
    component: Layout,
    name: "main",
    children: [
 
    ]
  },
  {
    path: "/login",
    component: Login
  }
];

注：在登录的时候已经将router.addRoute('main', item)路由动态添加了

4、在侧边栏组件中 Aside.vue，获取动态的路由

const menuData = computed(() => store.state.menu.routerList)

到这已经完成了根据权限，完成动态路由设计，但是还有一点点的问题，比如：刷新页面后，内容变得空白，这是由于刷新之后，路由还没有重新获取，所以导致空白，我的思路是做一个数据格式化

1）安装vuex的一个插件

npm i vuex-persistedstate  vuex数据持久化插件 

2）在store 的 index.js中引入并添加plugins

import { createStore } from "vuex";
import menu from "./menu";
import createPersistedstate from "vuex-persistedstate";
export default createStore({
  plugins: [
    new createPersistedstate({
      key: "pz_v3Pz"
    })
  ],
  modules: {
    menu
  }
});

3）这时候重新登录，会在控制台中看到获取的信息

4）将store中state的数据做判断

//获取存储的信息
const localData = localStorage.getItem("pz_v3Pz");
//如果有信息的化，就获取里面的menu数据，如果没有就获取原来的数据
const state = localData
  ? localData.menu
  : {
      isCollapsed: false,
      selectMenu: [],
      routerList: []
    };

5）这时候发现刷新之后可以显示了，但是点击某一项的时候还是空白，这时候我们需要再main.js中添加 刷新后的动态路由添加的逻辑

//在localstoreage中获取信息
const localData = localStorage.getItem("pz_v3Pz");
if (localData) {
  store.commit("dynameicMenu", JSON.parse(localData).menu.routerList);
  store.state.menu.routerList.forEach(item => {
    router.addRoute("main", item);
  });
}

这时候根据权限动态生成路由的逻辑全部完成了，感谢大家的观看，如有不懂或者写的不好的地方请联系🐧 2096864475 谢谢大家

制作不易，希望点个小心心❤