vue3 一个基于pinia简单易懂的系统权限管理实现方案，vue-router动态路由异步问题解决_如何解决router是异步的问题

2401_84446963

已于 2024-04-29 05:40:23 修改

阅读量526

点赞数 9

分类专栏：程序员文章标签： vue.js javascript 前端

于 2024-04-29 05:40:22 首次发布

本文链接：https://blog.csdn.net/2401_84446963/article/details/138298950

版权

本文介绍了如何在Vue3应用中结合Pinia进行简单的系统权限管理，解决Vue-router动态路由异步加载问题。通过在beforeEach钩子中检查用户登录状态，利用Pinia存储用户信息，并根据用户角色动态调整路由菜单。

摘要由CSDN通过智能技术生成

import { isUserTime } from “@/tool/unitl.js”

const routes = [
{
path: ‘/’,
name: ‘Index’,
component: () => import(‘@/view/Index.vue’),
},
{
path: ‘/login’,
name: ‘Login’,
component: () => import(‘@/view/Login.vue’)
},
{
path: ‘/business’,
name: ‘Business’,
component: () => import(‘@/view/business/Index.vue’)

},
{
    path: '/business/project',
    name: 'BusinessProject',
    component: () => import('@/view/business/Project.vue')
},
{
    path: '/commerce',
    name: 'Commerce',
    component: () => import('@/view/commerce/Index.vue')
},
{
    path: '/commerce/project',
    name: 'CommerceProject',
    component: () => import('@/view/commerce/Project.vue')
},
{
    path: '/consult',
    name: 'Consult',
    component: () => import('@/view/consult/Index.vue')
},
{
    path: '/consult/project',
    name: 'ConsultProject',
    component: () => import('@/view/consult/Project.vue')
},
{
    path: '/finance',
    name: 'Finance',
    component: () => import('@/view/finance/Index.vue'),
    children: [
        {
            path: 'projects/project',
            name: 'FinanceProjectsProject',
            component: () => import('@/view/finance/projects/Project.vue')