1.創建vue實例的時候 掛載vue-router
2.用戶登錄後獲取role 將role和路由美國頁面權限比較 生成最終用戶可訪問的路由表
3.調用router.addRoutes 添加可訪問路由
4.使用vuex管理路由 根據vuex中可訪問路由渲染側邊欄組件
在router文件夾下有一個index.js文件 就是用來控制頁面權限的 template模板已經有了靜態路由在index.js文件裡邊
需要在此文件添加動態路由 怎麼menu沒有出現這個動態的側邊欄呢😭 繼續找找看為啥
ps:靜態路由 :代表不需要動態判斷權限的路由
動態路由:代表需要動態判斷權限並通過個的頁面
- 在router文件夾下面的index.js增加動態路由
export const asyncRoutes = [
{
path:'/inquiry',
component: Layout,
alwaysShow: true,
meta: {
title: 'Inquiry',
icon: 'lock',
roles: ['admin']
},
children: [
{
path: 'create',
component: () => import('@/views/inquiry/form'),
name: 'CreateInquiry',
meta: {
title: 'CreateInquiry',
icon: 'lock',
roles: ['admin']
}
}
]
}
]
2. 因為是mock數據,所以要在mock下添加routes.js
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table'