路由懒加载---Vue Router
2024-08-27 20:31:57
一、什么是懒加载?
懒加载也就是延迟加载或者按需加载,即在需要的时候进行加载。
二、为什么在Vue路由中使用懒加载?
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时;
简单的说就是:进入首页不用一次加载过多资源造成用时过长;
三、实现懒加载方式?
方案一: 在路由文件中使用 reslove=>require(["../components/HelloWorld.vue"],reslove) 来引入组件模板;
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 Vue.use(Router)
4 export default new Router({
5 routes: [
6 {
7 path: '/',
8 name: 'HelloWorld',
9 component: reslove=>require(["../components/HelloWorld.vue"],reslove)
10 },{
11 path:"/home",
12 name:"home",
13 component: reslove=>require(["../components/home.vue"],reslove)
14 }
15 ]
16 })
方案二:在路由文件中使用 ()=>import("../components/HelloWorld.vue") 来引入组件模版;
1 import Vue from 'vue'
2 import Router from 'vue-router'
3
4 Vue.use(Router)
5 export default new Router({
6 routes: [
7 {
8 path: '/',
9 name: 'HelloWorld',
10 component: ()=>import("../components/HelloWorld.vue"),
11 },{
12 path:"/home",
13 name:"home",
14 component: ()=>import("../components/home.vue"),
15 }
16 ]
17 })
更多详细内容可以参考官网:点击跳转Vue——Router官网
最新文章
- tp框架之登录验证
- Post model至Web Api
- java多线程之CAS
- Android之旅---广播(BroadCast)
- 算法系列7《CVN》
- Joson的简单用法
- LeetCode——Two Sum
- JAVA_build_ant_sed
- 更改ORACLE 用户的 expired状态
- 二分查找 - vb.net
- Giraph入门
- Unix系统的常用信号
- 微信web开发者工具 移动调试
- 阶段01Java基础day24多线程+GUI
- linux 资料
- 为什么需要注册OCX控件?
- flume 实际的使用
- Extjs的各版本下载
- MVC项目发布IIS CSS无法加载
- asp.net core读取appsetting.json文件
热门文章
- selenium元素定位之 八大元素定位
- 方法对了,你做1年Android开发能顶别人做10年
- finalize() 方法——Java中垃圾回收提醒方法
- PAT甲级 1112 Stucked Keyboard
- 使用Windows客户端连接Linux系统中的MySQL时产生的错误已经解决
- Create Shortcut to Get Jar File Meta Information
- NOIP 模拟 $21\; \rm Game$
- SpringCloud War 包部署导致服务未正常注册到 Nacos 问题
- Difference between trustStore and keyStore in Java - SSL
- 使用GZIP压缩网页内容(一)