vue2.0 router.addRoutes动态添加的路由，配置了懒加载但是无效？

  • Z时代
  • 2024-02-05
  • 分类：IT

路由分为静态路由和动态路由：

静态路由配置在 router/index.js 中:

{
  path: '/components/test',
  component: (resolve) => require(['@/views/test.vue'], resolve),
  hidden: true
}

动态路由是通过后端接口返回的数据生成的路由数组，遍历数组对象的 component ，通过 const loadView = (view) => { return (resolve) => require([@/views/${view}], resolve)}，给路由配置动态组件。
在 router.beforeach 中，通过 router.addRoutes ,将配置好的动态路由传入

结果就是静态路由页面的懒加载有效，只加载当前页面使用到的js；
动态路由页面，通过js生成的懒加载代码就无效，依然全部加载了所有js

按照若依的修改，把require改为import，安装了插件，npm run dev可以运行，但是npm run build:prod就卡住了，无法打包：

// 静态路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect.vue'),
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  }]
export const loadView = (view) => { // 路由懒加载
  if (process.env.NODE_ENV === 'development') {
     return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

正式环境打包直接内存溢出了，卡住崩溃了?

回答：

使用 require 引入的组件并不会懒加载，一般需要懒加载的需要改成 import 导入。
这个需求可以借鉴 ruoyi-vue 的动态路由设计 ? ruoyi-ui/src/store/modules/permission.js · 若依/RuoYi-Vue - 码云

以上是 vue2.0 router.addRoutes动态添加的路由，配置了懒加载但是无效？ 的全部内容， 来源链接： utcz.com/p/934731.html

回到顶部