1.addRouter和addRouters

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

router.addRouters(routerData)

而且，addRouters 马上会被删除。

2.动态添加路由。

在路由中配置

router.beforeEach((to, from, next) => {if (store && store.state.routerNav.length == 0) {let data = routerdata//操作后端传来的数据let routerData = navadd(data)//添加路由router.addRoutes(routerData)//缓存路由mit("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的长度是否为零来判断是否重新请求数据。并且可以通过

mit("addRouterData",data)

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

3.下面是完整代码：

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

<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

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页面

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)//缓存路由mit("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页面

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: {}})