Vue Naive Admin

# 基础路由和动态路由

路由文件：src/router/routes/index.js，这个文件里包含基础路由basicRoutes和动态路由asyncRoutes，basicRoutes无需权限，总会注册到最终路由中，asyncRoutes来源与模块路由，存放在src/router/routes/modules，会根据当前登录角色的来判断过滤再注册到最终路由中，如以下用户模块的路由只有当登录角色为admin时才会被注册

// src/router/routes/modules/user.js
import Layout from '@/layout/index.vue'

export default [
  {
    name: 'USER_MANAGER',
    path: '/user',
    component: Layout,
    redirect: '/user/management',
    meta: {
      title: '用户中心',
      role: ['admin'],
    },
    children: [
      {
        name: 'USER',
        path: 'management',
        component: () => import('@/views/user/index.vue'),
        meta: {
          title: '用户管理',
          role: ['admin'],
        },
      },
      {
        name: 'PERMISSION',
        path: 'permission',
        component: () => import('@/views/user/UserPermission.vue'),
        meta: {
          title: '权限管理',
          role: ['admin'],
        },
      },
    ],
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 路由守卫，权限控制

TIP

此项目采用的是前端角色权限，即根据登录角色来判断过滤路由，将没有权限的路由剔除，从而实现权限的控制

# 实现

具体实现请看代码src/router/guard/permission-guard.js (opens new window)

# 菜单

默认有权限的路由都会展示到左侧的菜单中，如无需展示，添加isHidden = true 即可隐藏，如下

{
  name: '404',
  path: '/404',
  component: () => import('@/views/error-page/404.vue'),
  isHidden: true,
}
1
2
3
4
5
6

← 项目规范 →