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

vue中路由懒加载的写法

news 2025/8/13 4:34:44

为什么需要路由懒加载？

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

懒加载写法

写法一：

主要是使用了resolve的异步机制，用require代替了import,实现按需加载

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

写法二：

vue-router在官网提供了一种方法，可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件

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

方法三：

通过参数中的webpackChunkName将js分开打包

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