VUE动态路由加载坑

原创已于 2022-05-12 17:11:32 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架

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

js vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细讲解了动态路由在前端应用中的正确配置方式，重点在于区分固定路径和动态路径，并提供了使用resolve的示例。错误的import和require语法被修正，强调了路径前缀的必要性和两种不同情况下的组件导入策略。

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

错误方式一：

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/