Vue路由的动态添加和缓存1.addRouter和addRouters2.动态添加路由。3.下面是完整代码：

104 阅读 0 评论 69 点赞

我是靠谱客的博主大胆烧鹅，这篇文章主要介绍Vue路由的动态添加和缓存1.addRouter和addRouters2.动态添加路由。3.下面是完整代码：，现在分享给大家，希望可以做个参考。

1.addRouter和addRouters

二者都是动态添加路由。其中addRouters和addRouter的用法差不多，只不过addRouters中要传入数组

router.addRouters(routerData)

而且，addRouters 马上会被删除。

2.动态添加路由。

在路由中配置

复制代码

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
router.beforeEach((to, from, next) => {
if (store && store.state.routerNav.length == 0) {
let data = routerdata
//操作后端传来的数据
let routerData = navadd(data)
//添加路由
router.addRoutes(routerData)
//缓存路由
store.commit("addRouterData", data)
//跳转
next({ ...to })
} else {
next()
}
})
//操作后端传来的数据
function navadd(e) {
let routerArrData = []
e.forEach(v => {
routerArrData.push({
path: v.path,
name: v.name,
component: () => import('@/views' + v.path + '.vue')
})
});
return routerArrData
}

解释：

定义一个data来接受后端传进来的值。
写一个函数 navadd 来处理函数传进来的值，使其能够符合路由的格式。
利用 addRouters 添加路由路由

以上就是动态的添加路由。但是你会发现如果刷新页面，动态添加的路由会消失。这是由于页面刷新时，路由重新初始化，动态添加的路由此时已不存在，只有一些固定路由（比如登录页面）还在。所以要利用路由钩子 beforeEach 来重新添加，因为 beforeEach 每次刷新页面会重新执行。

但是如果不限制，则每次跳转都会请求一次数据，所以要用到vuex。

那么接下来就要缓存路由。

在vuex中定义一个state，名为 routerNav: [] ；

state: {

routerNav: []

},

再在mutation中定义一个方法来修改 routerNav: []。

mutations: {

    addRouterData(state, data) {

      state.routerNav = data

    }

  },

并在router中使用，判断store和store中state的routerNav的长度是否为零来判断是否重新请求数据。并且可以通过

store.commit("addRouterData", data)

来缓存路由，使其可以在其他页面使用。

3.下面是完整代码：

1. 一开始就跳转的静态页面home

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div>
<div v-for="v in routerNav" :key="v.name">
<router-link :to="v.path">{{ v.name }}</router-link>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "home",
data() {
return {
//一开始模拟的数据
//showdata: ["a", "b", "c", "d", "e"],
};
},
computed: {
...mapState(["routerNav"]),
},
};
</script>
<style scoped>
</style>

2.模拟的数据页面routerconfig

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let config = [{
path: '/a',
name: 'a',
component: () => import('@/views/a.vue')
}, {
path: '/b',
name: 'b',
component: () => import('@/views/b.vue')
}, {
path: '/c',
name: 'c',
component: () => import('@/views/c.vue')
}, {
path: '/d',
name: 'd',
component: () => import('@/views/d.vue')
}, {
path: '/e',
name: 'e',
component: () => import('@/views/e.vue')
}]
export default config

3.Router页面

复制代码

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
import Vue from 'vue'
import VueRouter from 'vue-router'
import routerdata from '../config/routerConfig'
import store from "@/store/index"
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/home.vue')
},
]
const router = new VueRouter({
routes,
history
})
router.beforeEach((to, from, next) => {
console.log(212121321321);
if (store && store.state.routerNav.length == 0) {
let data = routerdata
//操作后端传来的数据
let routerData = navadd(data)
//添加路由
router.addRoutes(routerData)
//缓存路由
store.commit("addRouterData", data)
//跳转
next({ ...to })
} else {
next()
}
})
//操作后端传来的数据
function navadd(e) {
let routerArrData = []
e.forEach(v => {
routerArrData.push({
path: v.path,
name: v.name,
component: () => import('@/views' + v.path + '.vue')
})
});
return routerArrData
}
export default router

4.vuex页面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import Vuex from 'vuex'
import { config } from '../config/routerConfig'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
routerNav: []
},
getters: {
},
mutations: {
addRouterData(state, data) {
state.routerNav = data
}
},
actions: {
},
modules: {
}
})