当前位置：首页 > news >正文

vue-router路由懒加载以及三种实现方式

news 2025/7/26 21:22:08

什么是路由懒加载？

延迟加载或按需加载路由所对应的组件，而不是在应用初始化时就一次性加载所有组件。
路由懒加载做了什么事情？

主要作用是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

即：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

如何实现路由懒加载？

vue项目实现路由按需加载（路由懒加载）的三种方式：

    Vue异步组件
    ES6标准语法import（）常用
    webpack的require，ensure()

Vue异步加载技术

vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，一个组件会生成一个js文件。

   component: resolve => require(['放入需要加载的路由地址'], resolve){path: '/problem',name: 'problem',component: resolve => require(['../pages/home/problemList'], resolve)}

ES6推荐方式imprort ()

直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
推荐使用这种方式，但是注意wepack的版本>2.4
vue官方文档中使用的也是import实现路由懒加载

上面声明导入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({routes: [{path: '/Foo',name: 'Foo',component: Foo},{path: '/Aoo',name: 'Aoo',component: Aoo}]
})

webpack提供的require.ensure()实现懒加载：

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{require.ensure(['@/components/HelloWorld'],()=>{resolve(require('@/components/HelloWorld'))})}
Vue.use('Router')
export default new Router({routes:[{{path:'./',name:'HelloWorld',component:HelloWorld}}]
})