您的位置：首页 > 编程技术 > js  >  vue-router懒加载的3种方式汇总

vue-router懒加载的3种方式汇总

 更新时间：2021年2月28日 15:12  点击：2511

未使用懒加载

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
	}
]
})

vue异步组件

component:resolve=>{reuqire([‘需要加载的路由地址']),resolve)

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

ES6的import()

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

webpack的require.ensure()

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
	}
	}]
})

总结

到此这篇关于vue-router懒加载的3种方式的文章就介绍到这了,更多相关vue-router懒加载内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • Vue-Router的routes配置详解

    在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。本文就详细的介绍一下...2021-10-25

  • Angular性能优化之第三方组件和懒加载技术

    这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术，对性能优化感兴趣的同学，可以参考下...2021-05-11

  • Vue.js实战之利用vue-router实现跳转页面

    对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-04-03

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-23

  • vue-router history模式服务器端配置过程记录

    vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下...2021-06-08

  • vue-router 基于后端permissions动态生成导航菜单的示例代码

    本文主要介绍了vue-router 基于后端permissions动态生成导航菜单的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-30

  • vue-router懒加载的3种方式汇总

    这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-28

  • vue实现路由懒加载的3种方法示例

    这篇文章主要给大家介绍了关于vue实现路由懒加载的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02

  • js 图片懒加载的实现

    这篇文章主要介绍了js 图片懒加载的实现，帮助大家更好的优化自身网页，提高网页响应速度，感兴趣的朋友可以了解下...2020-10-21

  • javascript瀑布流式图片懒加载实例解析与优化

    这篇文章主要针对javascript瀑布流式图片懒加载实例进行解析与优化，感兴趣的小伙伴们可以参考一下...2016-02-26

  • 解决JPA @OneToMany及懒加载无效的问题

    这篇文章主要介绍了解决JPA @OneToMany及懒加载无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-15

  • 前端必会的图片懒加载(三种方式)

    在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，本文主要介绍了前端必会的图片懒加载(三种方式)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-25

  • Vue-router中hash模式与history模式的区别详解

    这篇文章主要给大家介绍了关于Vue-router中hash模式与history模式区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-16

  • Android之Viewpager+Fragment实现懒加载示例

    本文介绍了Android之Viewpager+Fragment实现懒加载示例的教程，非常实用，有兴趣的同学快来看看吧 我们在做应用开发的时候，一个Activity里面可能会以viewpager（或其他...2017-07-06

  • SpringBoot2 JPA解决懒加载异常的问题

    这篇文章主要介绍了SpringBoot2 JPA解决懒加载异常的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-29

  • 基于vue-router的matched实现面包屑功能

    本文主要介绍了基于vue-router的matched实现面包屑功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-26

  • vue-router中hash模式与history模式的区别

    为了构建 SPA（单页面应用）,需要引入前端路由系统,这就是 Vue-Router 存在的意义,而这篇文章主要给大家介绍了关于vue-router中两种模式区别的相关资料，分别是hash模式、history模式,需要的朋友可以参考下...2021-06-24

  • SpringBoot新特性之全局懒加载机制

    这篇文章主要介绍了SpringBoot新特性之全局懒加载机制,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-16

  • Vue通过懒加载提升页面响应速度

    这篇文章主要介绍了Vue通过懒加载提升页面响应速度，对Vue性能感兴趣的同学，可以参考下...2021-05-11

  • vue-router路由懒加载及实现的3种方式

    这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-28