vue 动态加载路由

思路：后台传入路由json字符串，在前端组路由

根据后端返回的json字符串。组路由的方法

var refRouter = []
 // jsonstr 传入的路由字符串
export function loadRouter (jsonstr) {
  let jsonRouter = JSON.parse(jsonstr)
  let itemrouter = {
    path: jsonRouter[0].path,
    name: jsonRouter[0].name,
    component: (resolve) => { require([`@/${jsonRouter[0].component}`], resolve) },
    meta: jsonRouter[0].meta,
    children: []
  }
  let childrenItem = []
  jsonRouter[0].children.forEach(item => {
    let itemsC = {
      path: item.path,
      name: item.name,
      component: (resolve) => { require([`@/${item.component}`], resolve) },
      meta: item.meta
    }
    childrenItem.push(itemsC)
  })
  // 拼接路由
  itemrouter.children = childrenItem
  refRouter.push(itemrouter)
  // 清除之前加载的路由
  resetRouter()
  router.options.routes = refRouter
  router.addRoutes(refRouter)
}

遇到的问题

原来在后台将路由的 component字段 填入@/xx/xx.vue,后发现报错。于是更改未·@/·,
@ 是在src文件下。
需要在webpack.base.conf.js文件下添加’@’: resolve(‘src’),

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

路由json字符串

这里只是实现乐路由动态加载。还是有点小问题。后续实际需要更改

// 判断是否需要登录权限 以及是否登录(前置路由守卫)
router.beforeEach((to, from, next) => {
  console.log('判断')
  console.log(to)
  if (VueCookies.get('Islogin')) { // 判断是否登录
    // 可以跳转后台
    let routes = sessionStorage.getItem('curPath')
    if (routes !== null) {
      console.log(to.matched.length)
      if (to.matched.length === 0) {
        // 加载路由
        loadRouter(routes)
      }
    }
    next()
  } else { // 没登录则跳转到登录界面
    // 不可以跳转
    next()
  }
})