具体实现

  1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
  2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
  3. 调用router.addRoute(route)添加用户可访问的路由。
  4. 使用pinia管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

路由文件分静态路由和动态路由 

      export const constantRoutes: RouteRecordRaw[] = [
  {
    path: "/redirect",
    component: Layout,
    meta: { hidden: true },
    children: [
      {
        path: "/redirect/:path(.*)",
        component: () => import("@/views/redirect/index.vue"),
      },
    ],
  },

  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    meta: { hidden: true },
  },

  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        component: () => import("@/views/dashboard/index.vue"),
        name: "Dashboard",
        meta: { title: "dashboard", icon: "homepage", affix: true },
      },
      {
        path: "401",
        component: () => import("@/views/error-page/401.vue"),
        meta: { hidden: true },
      },
      {
        path: "404",
        component: () => import("@/views/error-page/404.vue"),
        meta: { hidden: true },
      },
    ],
  }
];

// 动态路由
export const asyncRoute: RouteRecordRaw[] = [
  // 多级嵌套路由
   {
         path: '/nested',
         component: Layout,
         redirect: '/nested/level1/level2',
         name: 'Nested',
         meta: {title: '多级菜单', icon: 'nested', userRole: ['user']},
         children: [
             {
                 path: 'level1',
                 component: () => import('@/views/nested/level1/index.vue'),
                 name: 'Level1',
                 meta: {title: '菜单一级',userRole: ['user']},
                 redirect: '/nested/level1/level2',
                 children: [
                     {
                         path: 'level2',
                         component: () => import('@/views/nested/level1/level2/index.vue'),
                         name: 'Level2',
                         meta: {title: '菜单二级',userRole: ['user']},
                         redirect: '/nested/level1/level2/level3',
                         children: [
                             {
                                 path: 'level3-1',
                                 component: () => import('@/views/nested/level1/level2/level3/index1.vue'),
                                 name: 'Level3-1',
                                 meta: {title: '菜单三级-1', userRole: ["admin"]}
                             },
                             {
                                 path: 'level3-2',
                                 component: () => import('@/views/nested/level1/level2/level3/index2.vue'),
                                 name: 'Level3-2',
                                 meta: {title: '菜单三级-2', userRole: ["admin"]}
                             }
                         ]
                     }
                 ]
             },
         ]
     },
  // 外部链接
  {
	path: '/external-link',
	component: Layout,
	name: "blogs",
	meta: {title: '外部链接', icon: 'nested', userRole: ['user']},
	redirect: 'https://www.cnblogs.com/haoxianrui/',
	children: [
	  {
		path: 'https://www.cnblogs.com/haoxianrui/',
		name: 'link',
		meta: { title: '有来技术官方博客', icon: 'link', userRole: ['user'] },
		redirect: 'https://www.cnblogs.com/haoxianrui/',
	  }
	]
  }
]

初始挂载静态路由

router.ts

      const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes as RouteRecordRaw[],
  // 刷新时，滚动条位置还原
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

store/permission.ts

加载中...

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://xiaoying.org.cn/pages/737d27/

最后更新于 2026-02-18 18:09 history