vue后端获取路由遇到的一些坑

vue动态路由是指从后端拿到路由的配置信息，由前端加载，这样一些没有权限的页面组件信息拿不到，也就不会加载了，相比完全由前端控制来说比较安全

在进入路由前的操作

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (to.path !== '/userLayout/login' && store.state.commonStore.routes.length === 0 && to.path !== '/403'&& to.path !== '/404') {
    store.dispatch('commonStore/getPermission')
      .then(res => {
        let temp = res.data["const routes"];
        for (let i = 0; i < temp.length; i++) {
          handleRouter(temp[i])
        }
        store.state.commonStore.routes = temp
        router.addRoutes(store.state.commonStore.routes)
        store.state.commonStore.menuList = res.data["const menuList"]
        next({
          ...to,
          replace: true
        })
      }).catch(err => {
        console.log(err)
      })
  } else {
    next()
  }
})

通过递归把页面的路径将页面异步挂载上去，这儿的一个坑大概花了我一天时间，不报错，就是显示空白。是我对webpack alias不太了解导致的

function handleRouter(r) {
  if (r['component']) {
    let path = r['component']
    path = path.replace('../', '')
    path = path.replace('.vue', '')
    r['component'] =
      resolve => require([`@/${path}.vue`], resolve);

  }
  if (r['children'])
    for (let i = 0; i < r['children'].length; i++) {
      handleRouter(r['children'][i])
    }
}

当时执行过这个方法之后vue devtools里观察发现组件已经挂载上去了，开发者工具里也不报错，跳转到空白页。在递归代码中可以发现我大费周章把组件路径截去了一部分，但是在require时又添加了上去，原因是@是webpack alias在编译时会替换成src目录路径，但是从后端拿过来传变量的话他就不替换了