vue-cli项目路由懒加载的三种方式

闲唠嗑几句

今天公司有新的项目要开展，需要重新部署新的项目，所以说以前好多忘记的东西，又得重新捡起来一遍，配置路由的时候发现还是使用的普通的使用require懒加载路由，所以在查看文档和资料后又重新总结了一遍，以加深记忆和方便下次查阅。

一、使用import异步引入组件

{
   path: '/hyh',
   component: ()=>{ import('@/components/ShowTest') },
   name: 'ShowTest'
}

{
  path: '/show',
  meta:{ requireAuth: true },
  name: 'showTest',
  component: resolve => { import('@/components/ShowTest').then(module=>resolve(module)) }
}

注解：有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

二、使用require异步引入组件

{
   path: '/index',
   component: (resolve) => {  require(['../components/index/index'], resolve) }
}

三、使用require.ensure 异步引入组件

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname2')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

{
   path: '/show',
   name: 'showTest',
   component: r => require.ensure([], () => r(require('../components/ShowTest')), 'showtest')
}

* 注解：

require.ensure()

语法：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

简介：

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

1. 参数详解：

依赖 dependencies

这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。

回调 callback

当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。

chunk名称 chunkName

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的文件束(bundle)。

2. 详细文档解释：

https://blog.csdn.net/qq_27626333/article/details/76228578

3. 路由登录权限：

https://www.cnblogs.com/learnoffs/p/8026768.html

vue-cli项目路由懒加载的三种方式

闲唠嗑几句

猜你喜欢