文档

• https://v3.router.vuejs.org/zh/installation.html

版本号

"vue": "2.6.10",
"vue-router": "3.6.5",

有几种方式实现动态路由：

1. 前端配置完整路由，通过接口返回的数据判断是否可显示，是否可访问
2. 前端配置部分路由，由后端接口返回的数据生成新路由
3. 抛开路由的思维，是否能直接通过url查询参数或者是动态路径参数解决问题

需求

部分页面通过服务器端接口返回的参数判断是否显示

用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决

实现思路

1、添加路由

通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加

可以通过Vue-Router提供的api，动态添加路由数据

addRoute(parentName: string, route: RouteConfig): () => void

文档说:

如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

我想直接覆盖原有路由，这样路由位置就不变了

实际操作的时候发现：并不会覆盖，控制台会提示路由重复

2、添加时机

应该在路由跳转之前进行

router.beforeEach(async (to, from, next) => {
  // 需要有一个全局变量记录是否添加过
  if (!globalData.hasAddDynamicRoute) {
    await Store.dispatch('router/updateDynamicRoutes')
    globalData.hasAddDynamicRoute = true
  }
})

3、获取路由配置

该接口获取的路由数据是一维数组，和路由配置格式不一样

// 不要使用this.$router.options.routes
getRoutes(): RouteRecord[]

页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据

4、响应式路由

既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知

通过vuex状态管理实现

// store/modules/router.js

export default {
  namespaced: true,

  state: {
    routes: [],
  },

  getters: {
    // 返回路由数据
    getRoutes(state) {
      return state.routes
    }
  },

  mutations: {
    setRoutes(state, routes) {
      state.routes = routes
    },
  },

  actions: {
    async updateDynamicRoutes({ commit }, userinfo) {
      
      // 添加动态路由
      await addDynamicRoutes()

      // 获取完整的路由信息
      const routes = router.getRoutes()

      commit('setRoutes', routes)
    },
  },
}

5、路由跳转

动态路由首次跳转的时候，动态路由还没有添加，需要转换处理

// 根据 to.name 来判断是否为动态路由
if (!to.name) {
    // 当前路由是动态的，确定是否存在
    if (router.getRoutes().findIndex((i) => i.path === to.path) !== -1) {
      next({ ...to, replace: true })
    } else {
      next('/')
    }
} else {
    next()
}

6、路由排序

添加的路由只能在最后，无法指定插入位置

通过meta元数据，添加排序字段order_value，可以在显示的时候实现排序

meta: {
    order_value: 1,
},

7、更新路由

如果数据变化，需要更新路由数据，再次添加同样会提示重复

[vue-router] Duplicate named routes definition

更新前需要先重置路由数据

// src/router/index.js

// 路由的创建
function createRouter() {
  return new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
  })
}

const router = createRouter()

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()

  router.matcher = newRouter.matcher // reset router
}

export default router

问题

动态添加的路由，出现空白页面问题，打印添加后的路由，发现component参数是undefined

通过修改component参数的配置方式解决

import Layout from '../views/layout/index.vue'
component: Layout,

// 修改为
component: () => import('../views/layout/index.vue'),

参考文章

• 手摸手教你实现vue的动态路由（router.v3.x版本）