后端程序员进来报道。最近在研究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]

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