当前位置：首页 > news >正文

vue3 ＋ vite实现动态路由，并进行vuex持久化设计

news 来源：原创 2025/6/8 5:23:38

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

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 谢谢大家

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