后端程序员进来报道。最近在研究vue3，首先非常感谢大佬提供一个纯净的后台管理系统

[yulinzhihou]

在研究的时候，有个小小的问题目前没研究懂。比如我登录成功，已经持久化了权限菜单相关的对象，但在左侧菜单的跳转路径里面，又引用了 route.ts里面的静态文件，我尝试在route.ts里面调用 pinia 缓存的权限菜单动态写入，提示我没有初始化 pinia。暂时没有办法，就只能数据库里面存一套，静态文件写一套。暂时应付着，还不太会这一套。

src/routers/route.ts 本想在这个文件里面引入 Pinia 持久化的 MenuStore 结果提示如下报错。

// routers/route.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// * 导入所有router
const metaRouters = import.meta.globEager("./modules/*.ts");

// * 处理路由表
export const routerArray: RouteRecordRaw[] = [];
Object.keys(metaRouters).forEach(item => {
	Object.keys(metaRouters[item]).forEach((key: any) => {
		routerArray.push(...metaRouters[item][key]);
	});
});
/**
 * @description 路由配置简介（💢没有使用动态路由，路由全部配置在本地，需要使用动态路由请自行改造）
 * @param path ==> 路由路径
 * @param name ==> 路由名称
 * @param redirect ==> 路由重定向
 * @param component ==> 路由组件
 * @param meta ==> 路由元信息
 * @param meta.requireAuth ==> 是否需要权限验证
 * @param meta.keepAlive ==> 是否需要缓存该路由
 * @param meta.title ==> 路由标题
 * @param meta.key	==> 路由key,用来匹配按钮权限
 * */
const routes: RouteRecordRaw[] = [
	{
		path: "/",
		redirect: { name: "login" }
	},
	{
		path: "/login",
		name: "login",
		component: () => import("@/views/login/index.vue"),
		meta: {
			requiresAuth: false,
			title: "登录页",
			key: "login"
		}
	},
	...routerArray,
	{
		// 找不到路由重定向到404页面
		path: "/:pathMatch(.*)",
		redirect: { name: "404" }
	}
];

const router = createRouter({
	// history: createWebHashHistory(),
	history: createWebHistory(),
	routes,
	strict: false,
	// 切换页面，滚动到最顶部
	scrollBehavior: () => ({ left: 0, top: 0 })
});

export default router;

类似如上问题。我参考了 pinia 官网的解决文案，无赖自己还不太懂，所以在这里插个眼，看有没有好心大佬给出解决方案。万分感谢，如果自己后面研究出来了，也会来解答自己留下的这个疑问。

https://github.com/vuejs/pinia/discussions/971

暂时没吊在这棵树上，我现在数据库和接口都弄好了。为了不影响 后面的开发，我还是在 src/routers/modules/ 目录里面加了一次所有接口返回的接口，这样才能让左侧菜单栏点击跳转到对应的组件页面。

// src/routers/modules/system.ts

import { RouteRecordRaw } from "vue-router";
import { Layout } from "@/routers/constant";

// 系统组件模块
const systemRouter: Array<RouteRecordRaw> = [
	{
		path: "/system",
		component: Layout,
		redirect: "/system/admin",
		meta: {
			title: "系统管理",
			icon: "icon"
		},
		children: [
			{
				path: "/system/admin",
				name: "admin",
				component: () => import("@/views/system/admin/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "管理员管理",
					key: "admin"
				}
			},
			{
				path: "/system/role",
				name: "role",
				component: () => import("@/views/system/role/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "角色管理",
					key: "role"
				}
			},
			{
				path: "/system/menu",
				name: "menu",
				component: () => import("@/views/system/menu/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "菜单管理",
					key: "menu"
				}
			},
			{
				path: "/system/config",
				name: "config",
				component: () => import("@/views/system/config/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "系统配置",
					key: "config"
				}
			},
			{
				path: "/system/attach",
				name: "attach",
				component: () => import("@/views/system/attach/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "附件管理",
					key: "attach"
				}
			}
		]
	}
];

export default systemRouter;

[Jeffrey-mu]

这个场景我之前也遇到类似需求，我们采用动态写一个json到前端build包中 读取json文件

[HalseySpicy]

你好，更新了动态路由，可以拉最新代码看看