vue使用router.addRoutes实现动态路由配置

背景：页面上有一个树，节点数据是从数据库读取的，每个节点对应一个路由，之前是静态写死了，现在需要改成动态的。

addRoutes注意事项

• addRoutes添加的路由，页面刷新时，就会消失，在动态添加的页面刷新时，会直接空白（配置404的话，就会跳到404页面），这是因为动态配置的路由消失了，导致跳转后该路由不存在，直接空白或404页面。
• 使用addRoutes前，需要对router.options.routes进行重新赋值，将动态路由加进来。
• addRoutes里的参数，直接将router.options.routes作为参数丢进来。

示例：使用addRoutes实现三级动态路由生成

• 三级动态路由生成方法 loadingRouter.js

import router from "@/router/index"
import store from "@/store/index"
import constRoutes from "@/router/constRoutes" // 这个是三级静态路由，我这边是需要在这个基础上增加同级动态路由
import Vue from 'vue'

const routes = constRoutes

/**
 * 动态添加路由
 */
export default function useAddRoute() {
	// if(0 != store.state.router.routeArr.length){
	// 	return 
	// }
   // 这边可以使用vue的store，存储生成的动态路由，并判断是否为空
   // 因为页面刷新时，store也会被清空，这样就可以判断动态路由是否需要重新生成，避免多次调用后端方法
  let _constRoutes = []
   for(let constRoute of constRoutes){
     _constRoutes.push(constRoute.name)
   }
   // 我这边是获取树节点，数据结构是树，根据自己后端返回的数据结构进行调整
   Vue.prototype.$get('/tree').then((res) => {
     let pageRoutes = []
     for(let parentNodes of res.data){
       for(let nodeInfo of parentNodes.children){
         // 跳过静态路由，有配置静态路由就以静态路由为准
         if(_constRoutes && -1 < _constRoutes.indexOf(nodeInfo.name)){
           continue
         }
         pageRoutes.push(nodeInfo)
       }
     }
     let data = routesData(pageRoutes)
     // store.dispatch('setRouteArr', data)
     for(let oneIndex in router.options.routes){
     	// 通过name找到对应的一级节点
       if('one-nodeName' == router.options.routes[oneIndex].name){
         for(let twoIndex in router.options.routes[oneIndex].children){
         	// 通过name找到对应的二级节点，将二级节点的children（三级节点）重新赋值
           if('two-nodeName' == router.options.routes[oneIndex].children[twoIndex].name){
             router.options.routes[oneIndex].children[twoIndex].children = data
             break
           }
         }
       }
     }
     // 404页面也需要动态生成，否则在动态路由上刷新，会直接跳转到404
     const routes_404 = [{
       path: '/404',
       component: () => import('@/views/404'),
       hidden: true
     },
       { path: '*', redirect: '/404', hidden: true }]
     router.options.routes = router.options.routes.concat(routes_404)
     router.addRoutes(router.options.routes)
   })
}

// 在静态路由后面追加动态路由
function routesData(result) {
  result.forEach(item => {
    routes.push({
      path: '/' + item.name,
      name: item.name,
      meta: {
        title: "same-page", custom_title: true
      },
      component: () => import('@/views/same-page'), // 这边是同一个页面，不同路由，如果是不同页面，可以调整一下
    })
  })
  return routes
}

• 路由跳转前，调用动态路由方法 permission.js

router.beforeEach((to, from, next) => {
  // 动态路由消失时，可以重新生成，避免因为页面刷新，导致动态路由消失
  useAddRoute()
  .......
})

总结：实现动态路由后，因为刷新问题，发现router.addRoutes会随组件的销毁而销毁，没办法一直存在，只能改用放路由守卫那，路由跳转之前判断是否存在，不存在的话，就重新生成。。。。。。