/*
 * @Author: Wushiqi
 * @Descripttion: 获取路由：遍历传入的菜单列表，拿取拼接路由所需的数据（path、name、title、component）
 * @Date: 2020-08-19 10:44:15
 * @LastEditor: Wushiqi
 * @LastEditTime: 2020-08-25 16:07:33
 */
// Layout组件是项目中的主页面，切换路由时，仅切换Layout中的组件
import Layout from '@/layout'
export function getAsyncRoutes(routes) {
  
  const res = []
  routes.forEach(route => { // 所有菜单都是二级结构，一级没有页面功能，所以只要添加二级菜单的路由
    if (route.childMenuInfoTreeSet.length !== 0) {
      const children = []
      route.childMenuInfoTreeSet.forEach(menu => { // 二级菜单需匹配页面
        children.push({
          path: menu.url,
          name: menu.componentName.split('/')[1],
          // 此处使用require，由于import会有奇怪的错误
          component: (resolve) => require([`@/views${route.componentName + menu.componentName}`], resolve),
          meta: { title: menu.menuName }
        })
      })
      res.push({
        path: route.url,
        component: Layout,
        children: children
      })
    }
  })
  return res
}

3.在获取菜单的时候同时生成路由表：

逻辑：首次登录时获取菜单，同时执行getAsyncRoutes方法获取路由表，将得到的路由数据使用addRoutes添加到路由表，并且将每一项路由push到路由的options。注意一个坑：f5刷新页面时，会执行路由的跳转的操作，而再次获取菜单和路由这个操作是在路由跳转之后的，所以在刷新的时候就找不到起始的路由（除了写死的路由之外），解决办法是让再次获取菜单和路由的操作在路由跳转之前，我这边的思路是在第一次获取菜单时，将菜单存到sessionStorage，之后刷新的时候不再访问接口重新获取。

这是写死的路由（未添加动态数据）：

这是添加了动态数据之后的路由：?

获取菜单部分代码：

async created() {
    if (!sessionStorage.menu) { // 首次登陆获取菜单列表
      const response = await publicAPI.userMenuAPI() // 从后台获取菜单列表
      const data = response.data.data.menuList
      if (data.length > 0) {
        this.menuList = data
        const router = getAsyncRoutes(data) // 根据菜单提取路由
        this.$router.addRoutes(router)
        router.forEach(val => { // 将菜单提取出来的路由加到路由表
          this.$router.options.routes.push(val)
        })
        console.log(this.$router);
        sessionStorage.setItem('menu', JSON.stringify(data)) // 将菜单列表存到sessionStorage
      }
    } else { // 已有菜单不再重新获取
      this.menuList = JSON.parse(sessionStorage.menu)
      // 要重新将路由挂上去，否则点击菜单不会跳转页面
      const router = getAsyncRoutes(this.menuList)
      this.$router.addRoutes(router)
      router.forEach(val => { // 将菜单提取出来的路由加到路由表
          this.$router.options.routes.push(val)
       })
    }
  }

{
    path: '*',
    redirect: '/redirect/:path*'
  },
  {
    path: '/redirect',
    name: 'redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/redirect')
      }
    ]
  },

<script>
export default {
  created() { // 重定向页面
    const { params } = this.$route
    const { path } = params
    if (path) {
      this.$router.push({ path: `/${path}` })
    } else {
      this.$router.push({ path: `${sessionStorage.toPath}` })
    }
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

if (!to.redirectedFrom && to.path !== '/redirect') { // 如果不是重定向操作，就存下当前访问的路由地址
    sessionStorage.setItem('toPath', to.path)
  }