从 0 搭理后台管理系统
初始化项目
提示选择一个preset （预置项）
选择自自定义选项
路由是否使用History模式？Y
选择一种CSS预处理：Less （如果安装Sass/SCSS，需要本地预先安装python）
选择一种代码格式化规范类型：ESLint + Standard config
保存时检测 还是 提交时检测并修复：Lint on save
将以上配置存放到哪里？In dedicated config files （单独文件中）
是否保存为preset（预设项，以后可以使用的,就不用像这样再一步一步来）：Y
保存preset为（给预置项个名字）：All
之后系统自动安装项目并生成preset（预置项）
修改项目目录
说明
路由配置
路由配置承担着重要的作用，它影响着如下内容：
左侧菜单内容
是否缓存该页
该页面图标（显示在菜单、面包屑和Tab标签）
接下来来看如何配置路由。
路由的配置是在'./src/router'文件夹下，'./src/router/index.js'文件中定义路由拦截的逻辑，'./src/router/routers.js'文件中定义页面路由信息。
##路由可配项
路由中的meta除了原生参数外可配置的参数:
1
2
3
4
5
6
7
8
| meta:{
hideInMenu:(default:false)设置为true 再左侧栏不会显示该页面选项
showAlways: (default: false) 设为true后如果该路由只有一个子路由，在菜单中也会显示该父级菜单
notCache: (default: false) 设为true后页面不会缓存
access: (default: null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
icon: (default: -) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
href: 'https://xxx' (default: null) 用于跳转到外部连接
}
|
跳转到其他网页，在新窗口打开
你可以在菜单栏中显示一个任意连接，并且点击该菜单项会打开新窗口展示链接到的页面。在路由中需要如下定义：
1
2
3
4
5
6
7
8
9
10
11
| export default [
{
path: '',
name: 'lison16',
meta: {
href: 'https://wsq01.github.com/',
icon: '_love',
title: 'WSQ的github首页'
}
}
]
|
在独立页面展示的页面
如登录页、错误页这种独立的页面，无需使用Layout组件，则直接定义在routers.js中export default []的数组中，如登录页的定义如下：
1
2
3
4
5
6
7
8
9
10
11
12
| export default [
{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录',
hideInMenu: true
},
component: () => import('@/view/login/login.vue')
},
]
|
在Main组件展示区域中展示的页面
页面作为多Tab页展示，在Layout组件的视图区域显示，则需要在用到子路由，定义如下：
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| xport default [
{
path: '/',
name: '_home',
redirect: '/home',
component: Main,
meta: {
hideInMenu: true,
notCache: true
},
children: [
{
path: '/home',
name: 'home',
meta: {
hideInMenu: true,
title: '首页',
notCache: true,
icon: 'md-home'
},
component: () => import('@/view/single-page/home')
}
]
},
{
path: '/multilevel',
name: 'multilevel',
meta: {
icon: 'arrow-graph-up-right',
title: '多级菜单'
},
component: Main,
children: [
{
path: 'level_2_1',
name: 'level_2_1',
meta: {
icon: 'arrow-graph-up-right',
title: '二级-1'
},
component: () => import('@/view/multilevel/level-1.vue')
},
{
path: 'level_2_2',
name: 'level_2_2',
meta: {
access: ['super_admin'],
icon: 'arrow-graph-up-right',
title: '二级-2'
},
component: parentView,
children: [
{
path: 'level_2_2_1',
name: 'level_2_2_1',
meta: {
icon: 'arrow-graph-up-right',
title: '三级'
},
component: () => import('@/view/multilevel/level-2/level-2-1.vue')
}
]
}
]
},
{
path: '/401',
name: 'error_401',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/401.vue')
},
{
path: '/500',
name: 'error_500',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/500.vue')
},
{
path: '*',
name: 'error_404',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/404.vue')
}
]
|
路由拦截
在./src/router/index.js文件中，你可以配置路由跳转时的路由守卫。你可以设置文件中的LOGIN_PAGE_NAME常量，其默认值是login，这个就是路由列表中你的登录页面的name值，如果你的登录页面name值为login，则无需修改。
