软件定制开发供应商vue 实现动态路由-巴掌软件-高性价比的软件定制开发解决方案

1、什么是？
2、软件定制开发供应商动态路由的好处
3、软件定制开发供应商动态路由如何实现

1、软件定制开发供应商什么是动态路由？

动态路由，软件定制开发供应商动态即不是写死的，是可变的。软件定制开发供应商我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。
总结：

     1）路由可变，不是写死的，动态加载     2）存储分两种：存前端，存数据库1
2
3

2、动态路由的好处

使用动态路由可以跟灵活，无需手工维护，我们可以使用一个页面对路由进行维护。如果将路由存储到数据库，还可以增加安全性。
总结：

     1）灵活，无需手工维护     2）增加安全性1
2
3

3、动态路由如何实现

在此以路由存储在数据库为例
流程：一般我们在登录的时候，根据登录用户的角色返回此角色可以访问的页面的路由，前端将路由存储到vuex(vuex存储的数据必须可持久的，不要一刷新页面就不见),我们在路由前置守卫处动态添加拿到的路由，对页面进行渲染。

1）此为我的router目录，index.js对路由添加，守卫拦截等处理。static-route.js为前端定义的，不需要动态加载的，如登陆页面，忘记密码页面，404页面等。

index.js

import Vue from 'vue'import $cookies from 'vue-cookies'import VueRouter from 'vue-router'import store from '../store'import staticRoute from './static-route.js'Vue.use(VueRouter)const router = new VueRouter({	mode: 'history',	base: process.env.BASE_URL,	routes: staticRoute //staticRoute为静态路由，不需动态添加})let isToken = truerouter.beforeEach(async (to, from, next) => {	//定义isToken为true和vuex不为空时添加路由	if (isToken && store.state.routers.routers.length != 0) {		//从vuex中获取动态路由		const accessRouteses = await store.state.routers.routers;		//动态路由循环解析和添加		accessRouteses.forEach(v => {			v.children = routerChildren(v.children);			v.component = routerCom(v.component);			router.addRoute(v); //添加		})		isToken = false //将isToken赋为 false ，否则会一直循环，崩溃		next({			...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)			replace: true, // 重进一次, 不保留重复历史		})	} else {		if (to.name == null) {			next("/404")		} else {			if (to.meta.title) { //判断是否有标题				document.title = to.meta.title //给相应页面添加标题			}			next()		}	}})function routerCom(path) { //对路由的component解析	return (resolve) => require([`@/views/${path}`], resolve);}function routerChildren(children) { //对子路由的component解析	children.forEach(v => {		v.component = routerCom(v.component);		if (v.children != undefined) {			v.children = routerChildren(v.children)		}	})	return children}export default router1
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

2）登陆成功后将获取到的动态路由存储到vuex

vuex—>index.js

import Vue from 'vue'import Vuex from 'vuex'//数据持久化import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)const routers = {  namespaced: true,  state: () => ({    routers:"",  }),  mutations: {    routers(state, newsdata) {      state.routers = newsdata    },  },  actions: {    routers(context) {      context.commit('routers')    },  },  getters: {    routers(state) {      console.log("getters", state)      return state.routers    },      }}const store = new Vuex.Store({  modules: {    routers: routers,  },    // 数据持久化  plugins: [createPersistedState({    //key是存储数据的键名    key: 'routersData',    //paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token      paths: ["routers.routers"]  })]})export default store1
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

我的动态路由模板

//动态路由const dynamicRoute = [{  "path": "/main",  "name": "main",  "redirect": "/main/index",  "component": "main/main.vue",  "children": [{      "path": "index",      "name": "index",      "component": "index/index.vue",      "meta": {        "name": "index",        "title": "首页",        "icon": "el-icon-location",        "menu":true //true为菜单栏      }    },    {      "path": "Configuration",      "name": "Configuration",      "redirect": "Configuration/route",      "component": "Configuration/index.vue",      "roles": ['developer', "admin"], //  developer、admin角色的用户才能访问该页面      "meta": {        "title": "配置",        "icon": "el-icon-location",        "menu":true      },      "children": [{          "path": "route",          "name": "route",          "component": "Configuration/route/index.vue",          "meta": {            "title": "菜单",            "icon": "",            "menu":true          },        }, {          "path": "user",          "name": "user",          "component": "Configuration/user/index.vue",          "meta": {            "title": "用户管理",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "admin",          "name": "admin",          "component": "Configuration/admin/index.vue",          "meta": {            "title": "管理员管理",            "icon": "",            "menu":true          },        },                {          "path": "userEdit",          "name": "userEdit",          "component": "Configuration/user/user-Edit.vue",          "meta": {            "title": "编辑用户",            "icon": "",            "menu":false          },        },        ]    },    {      "path": "check",      "name": "check",      "redirect": "check/user",      "component": "check/index.vue",      "roles": ['developer', "admin", "check"], //  developer、admin角色的用户才能访问该页面      "meta": {        "title": "审核",        "icon": "el-icon-location",        "menu":true      },      "children": [{          "path": "user",          "name": "checkUser",          "component": "check/check-user/index.vue",          "meta": {            "title": "用户实名审核",            "icon": "el-icon-location",            "menu":true          }        },        {          "path": "enterprise",          "name": "checkEnterprise",          "component": "check/check-enterprise/index.vue",          "meta": {            "title": "企业认证审核",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "checkNormImage",          "name": "checkNormImage",          "component": "check/check-norm-image/index.vue",          "meta": {            "title": "标准照认证审核",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "checkHiringJobs",          "name": "checkHiringJobs",          "component": "check/check-hiring-Jobs/index.vue",          "meta": {            "title": "求职、招聘认证审核",            "icon": "el-icon-location",            "menu":true          },        }      ]    }  ]}, ]export default dynamicRoute1
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

路由管理界面（可能有不完善的地方）

讲一讲遇到的坑及注意点

“component”: “check/check-norm-image/index.vue”, 用字符串再在解析，不要像静态路由一样。否则第一次进去可以，刷新就变空白
此处为重要的一点，直接用next()不行

next({      ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)      replace: true, // 重进一次, 不保留重复历史    })1
2
3
4

3）由于添加完路由还会重复执行一遍，所有必须确保不要一直死循环添加路由。否则直接崩溃。这里我用的是isToken变量确保不循环。

走进了一间屋子，如果你是最牛的人，那么你就走错了地方。我的理解：你将没有进步的空间，止步于此。1
2
3