vue中路由懒加载的写法

最新推荐文章于 2024-09-30 14:28:41 发布

发渐稀

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量229

点赞数

分类专栏： vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_64760783/article/details/131913270

版权

vue2 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

路由懒加载用于解决打包后JavaScript文件过大的问题，提高页面加载效率。通过在vue-router中利用resolve的异步机制或Promise，可以实现按需加载不同路由对应的组件。方法包括使用require或import，以及指定webpackChunkName来分割打包。这样，只有当路由被实际访问时，才会加载相应的组件代码。

摘要由CSDN通过智能技术生成

为什么需要路由懒加载？

当打包构建应用时，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')
        }
  ]
})