VUE+Webpack 实现懒加载的三种方式

转自：https://blog.csdn.net/qq_37540004/article/details/78727063

第一种 

引入方式 就是正常的路由引入方式

1. const router = new Router({

2. routes: [

3. {

4. path: '/hyh',

5. component: hyh,

6. name: 'hyh'

7. }

8. ]

9. })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

第二种

1. const router = new Router({

2. routes: [

3. {

4. path: '/index',

5. component: (resolve) => {

6. require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了

7. }

8. }

9. ]

10. })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

第三种 推荐！！！

1. // r就是resolve

2. const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');

3. // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载

4. const router = new Router({

5. routes: [

6. {

7. path: '/list/blog',

8. component: list,

9. name: 'blog'

10. }

11. ]

12. })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

打包后的JS按照你的模块划分去拆分

介绍一种管理路由的方式

1. // 定义一个路由的数组 类似于白名单黑名单

2. const defaultRouterArr = ['/list/share']

3. router.beforeEach((to, from, next) => {

4. // 如果匹配到这个数组

5. if (defaultRouterArr.indexOf(to.path) >= 0) {

6. // 执行各种操作 比如让他去登录 不让她进去等等 通过next方法来控制 详细参考vue路由

7. next()

8. } else {

9. next()

10. }

11.  

})