VUE动态路由加载坑

一个程序猿cc

已于 2022-05-12 17:11:32 修改

阅读量1.6k

点赞数 1

分类专栏： js vue 文章标签：前端前端框架

于 2022-04-20 11:17:00 首次发布

本文链接：https://blog.csdn.net/OUalen/article/details/124292932

版权

js vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态路径不能使用，此路径不通！

错误方式一：

component:() => import(`@${item.component}`)

错误方式二：

component:(resolve) => require([`@${item.component}`], resolve),

正确方式

export const getRouter = (access)=>{
  let res = [];
  forEach(access,item=>{
    if (!item.meta || (item.meta && !item.meta.hideInMenu) && item.component) {
      let obj = {
          path: item.path,
          icon: (item.meta && item.meta.icon) || '',
          name: item.name,
          meta: item.meta,
        }
        if(item.component.startsWith("/components")){
          item.component = item.component.slice(12);
            //动态路由路径
          obj.component = resolve => require([`@/components/${item.component}`],resolve)
        }else{
           //动态路由路径
          obj.component=(resolve) => require([`@/view/${item.component}`], resolve)
        }
        if ((hasChild(item) || (item.meta && item.meta.showAlways))) {
          obj.children = getRouter(item.children)                    
        }
        if (item.meta && item.meta.href) obj.href = item.meta.href
        res.push(obj)
    }
  })
  return res
}

路径前部分必须有固定路径。 @/view/