关于vue.js:vue-后端返回路由-添加动态路由

参考链接：https://blog.csdn.net/qq_3190…

思路：
路由表不在前端进行比对，后盾对用户的权限进行比对，返回给前端一个比对好的路由表，且返回的路由表

  {
    path: '/people',
    name: 'people',
    meta: {
      title: '人口治理',
      requireAuth: true
    },
    component: () => import('@/views/main/Main'),
    children: [{
      path: '/people-list',
      name: 'people-list',
      meta: {
        icon: 'el-icon-user-solid',
        title: '人口治理',
        requireAuth: true
      },
      component: () => import('@/views/people/list')
    }, {
      path: '/people-detail',
      name: 'people-detail',
      meta: {
        requireAuth: true,
        notCache: true,
        hideInMenu: true,
        title: route => ` 人口详情 -${route.query.xm}`
      },
      component: () => import('@/views/people/detail')
    }]
  }

function filterRouter (routes) {
  const router = routes.map(route => {if (route.component === 'main') {route.component = _import('/main/Main')
    } else {route.component = _import(route.component)
    }
    if (route.meta.routeTitle) {route.meta.title = _title(route.meta.title, route.meta.routeTitle)
    }
    if (route.children && route.children.length > 0) {route.children = filterRouter(route.children)
    }
    return route
  })
  return router
}

这个函数的次要作用就是把后盾传过来的字符串型的 component 转化为真正的组件
其中_import()函数的定义如下：

function _import (file) {return () => import('@/views' + file + '.vue')
}

function _title (title, routeTitle) {return route => `${title}${route.query[routeTitle]}`
}

应用 router.onReady 调用一下获取的动静路由

router.onReady(() => generateRoutes())

function generateRoutes () {
  let vueMenus = localStorage.vueMenus
  if (vueMenus) {vueMenus = JSON.parse(vueMenus)
    const filterRoutes = filterRouter(vueMenus)
    // console.log('filterRoutes', filterRoutes)
    filterRoutes.map(item => {// console.log('item', item)
      router.addRoute(item)
    })
    router.addRoute({
      path: '*',
      meta: {hideInMenu: true},
      component: _import('/main/NotFound')
    })
    router.options.routes = router.options.routes.concat(filterRoutes)
    // console.log(router.options.routes)
  }
}