1、保存路由信息
在登录的时候从后端获取路由信息保存到全局pinia或者是vuex,我用的是pinia
建议在保存的时候对路由信息数组做好处理
2、在router.ts中引入pinia保存的路由信息:
注意不要使用createWebHistory路由模式,不然上线后刷新会空白,需要使用hash模式
import {
createRouter,
RouteRecordRaw,
createWebHashHistory,
} from "vue-router"
//全局保存的路由信息
import { menusRouterStore } from "@/stores/modules/menusRouter"
//确保打包后动态导入vue文件
const modules = import.meta.glob("../views/**/**.vue")
const routes: RouteRecordRaw[] = [
{
path: "/",
redirect: "/home",
},
]
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes,
})
3、添加动态路由+再次加载路由
目前路由只有静态的页面,我们需要做动态路由,需要在路由守卫router.beforeEach中添加。
router.beforeEach((to, from, next) => {
const allow = Session.get