vue+webpack 实现懒加载的三种方式
第一种:
引入方式 就是正常的路由引入方式
const router = new Router({
routes: [
{
path: '/hyh',
component: hyh,
name: 'hyh'
}
]
})
第二种:
const router = new Router({
routes: [
{
path: '/index',
component: (resolve) => {
require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了
}
}
]
})
第三种 推荐!!!
// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载
const router = new Router({
routes: [
{
path: '/list/blog',
component: list,
name: 'blog'
}
]
})
打包后的JS按照你的模块划分去拆分
介绍一种管理路由的方式
// 定义一个路由的数组 类似于白名单黑名单
const defaultRouterArr = ['/list/share']
router.beforeEach((to, from, next) => {
// 如果匹配到这个数组
if (defaultRouterArr.indexOf(to.path) >= 0) {
// 执行各种操作 比如让他去登录 不让她进去等等 通过next方法来控制 详细参考vue路由
next()
} else {
next()
}
vue+webpack 实现懒加载的三种方式的更多相关文章
- Webpack实现路由懒加载的三种方式
原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063 第一种: 引入方式(正常引入): const router = new ...
- HBase协处理器加载的三种方式
本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...
- Hibernate懒加载的三种解决方案
Hibernate懒加载的两种解决方案: 1.Hibernate.initialize(代理对象) 2.在*.hbm.xml映射文件中添加lazy="false"属性 3.使用op ...
- vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title
1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...
- 【转】实现ViewPager懒加载的三种方法
方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
- Flask程序相关配置加载的三种方式
方式一:从对象中加载配置 1.定义配置类,在配置类中添加相应的配置 2.通过app.config.from_object(配置类)进行加载 代码如下: from flask import Flask ...
- vue 动态路由按需加载的三种方式
在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...
- JavaScript异步加载的三种方式——async和defer、动态创建script
一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...
随机推荐
- ASE19团队项目 beta阶段 model组 scrum3 记录
本次会议于12月4日,19时30分在微软北京西二号楼sky garden召开,持续20分钟. 与会人员:Jiyan He, Lei Chai, Linfeng Qi, Xueqing Wu, Yuto ...
- Insufficient space for shared memory file 解决办法
Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file: /tmp/hsperfd ...
- jade-mixin 代码的重用
有时候页面有好多个区块,比如列表区块,但是他们代码结构又是一模一样的怎么弄?jade天生就是节约成本,节约时间的,mixin就是让代码块可以重用的函数 mixin lession p jade s ...
- 使用pyinstaller打包使用cx_Oracle模块的程序出现The specified module could not be found的问题
pyinstaller看起来并不会将动态链接库自动打包,所以我们需要告诉pyinstaller要打包哪些动态链接库,步骤如下(假设python文件名为 oracletest.py): 1. 使用pyi ...
- 大数据之路week02 Collection 集合体系收尾(Set)
1.Set集合(理解) (1)Set集合的特点 无序,唯一. (2)HashSet集合(掌握) A: 底层数据结构是哈希表(是一个元素为链表的数组) B: 哈希表底层依赖两个方法: hashCode( ...
- MVC,MVP 和 MVVM 的图示 - 阮一峰
作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身 ...
- 学习Python编程的最好的几本书
读书是汲取某个特定学科的知识以及更深入的理解该学科的最好的方式.在这个科技世界,通晓计算机系统各个不同的技术领域是至关重要的.其中最重要的内容之一便是计算机程序语言.现今,计算机中存在许多不同类型的程 ...
- Js实现table单双行交替色
依稀记得,当初我刚学编程的时候还学过怎么实现表格单双行交替色,现如今早已记不清当时的实现思路,这两天突然想起,没事就自己写了一小段代码,也不知道是否是当年的思路,不过不用纠结这个问题.:) 代码很简单 ...
- 组件化网页开发 / 步骤二 · 2-11 jquery的ajax方法 以及下一章跨域没懂
1,根据2-11课程老师的提示,自己封装 $.ajax 2,第三章,跨域,没看懂
- winfrom 窗体首次加载
#region Override Functions /// <summary> /// OnLoad /// </summary> /// <param name=&q ...