动态路由实现

动态路由为了解决路由权限的问题，指每个用户登录返回的菜单都不一样，自己写的静态路由无法保证新增或者删除。动态路由解决这些问题，也避免了重复维护。

首先因为登陆成功后会返回路由数据，因为不确定是几层，所以要封装一个方法去调用，然后用深度递归的方式去找到数据，并且转换成路由所需要的格式然后存到一个空数组中，导出空数组

方法可以放在utils公共方法里，或者自己能找得到的地方。

//动态路由核心-把后端树状结构转成列表结构
export function fn(data) {
    let arr = []
    function deep(data) {
        data.forEach(item => {
            if (item.children.length) {
                //递归开始
                deep(item.children)
            } else {
                //把路径变成自己本地的名字
                let path=item.path.slice(0,1).toUpperCase()+item.path.slice(1)
                // console.log('首字母大写',path);
                arr.push({
                    path: "/" + item.path,
                    name: item.path,
                    component: () => import (`@/views/list/${path}.vue`)
                     // component: (resolve) => require([`@/views/${item.path}.vue`], resolve)
                })
            }
        })
    }
    deep(data)
    return arr
  }

在路由页面中引入方法，并且进行判断 ，如果登录成功并且有返回的路由数据的话则进行动态添加

import {fn} from '@/utils/routeList.js' //把生成列表路由放到公共方法里
// //生成动态路由-登录后获取到路由列表，调用递归函数通过router.addRoute('组件名',值)生成动态路由
console.log('路由先走');
 function loadRoute() {
  let token = localStorage.getItem('token')
  let menusList=JSON.parse(localStorage.getItem('menusList'))
  //注意此处是登录后,有了左侧导航数据，再进行路由表动态加载
  if (token && menusList) {
      let newList = fn(menusList)
      console.log('路由表结构',newList);
      newList.forEach(item => {
          //利用核心方法addrouter进行路由添加，两个参数分别是要添加到的路由下，和添加什么 
          router.addRoute("Home", item)
      })
  }
}
//!!!注意此处在次调用1次动态路由,为了防止登录后跳转其它页面,刷新页面找不到问题。第2点注意，要在路由实例化后调用执行。
loadRoute()