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>标签时才 ...
随机推荐
- MVC方式显示数据(数据库)
新建实体数据模型 选择ADO.NET实体数据模型,名称改为数据库名 因为使用现有数据库,所以选择来自数据库的EF设计器,只演示所以只选择一个表,空模型可后期增加表 选择从数据库更新模型 新建数据库连接 ...
- LVS、nginx、Haproxy对比(详细)
目录 代理软件 负载均衡产品介绍 haproxy 本文档参考 http://www.ha97.com/5646.html 代理软件 负载均衡产品介绍 市面上的负载均衡产品主要分为两种:硬件产品和软件产 ...
- OGG 自动重启脚本
6-20 * * * /oggdata/log/oggautorestart.sh >/oggdata/log/crontab_oggautorestart.log 2>&1 [说 ...
- java - day009 - 基础API,object,String, StringBuilder/StringBuffer, 正则表达式
API java.lang.object object 所有类的顶层父类 一个类如果不继承其他类,默认继承object. toString() 获得一个对象的字符串表示 可以重写 ...
- idou老师教你学Istio 27:解读Mixer Report流程
1.概述 Mixer是Istio的核心组件,提供了遥测数据收集的功能,能够实时采集服务的请求状态等信息,以达到监控服务状态目的. 1.1 核心功能 •前置检查(Check):某服务接收并响应外部请求前 ...
- C#自由组合本地缓存、分布式缓存和数据库的数据
一.背景介绍: 我们在进行数据存储的时候,有时候会加入本地缓存.分布式缓存以及数据库存储三级的结构,当我们取值的时候经常是像下面这样的流程: 1.先取本地缓存,如果值存在直接返回 2.本地缓存不存在, ...
- jade过滤器
以上语法基本讲完了jade的语法,然后在jade里面并不仅仅局限于使用jade语法,同样可以使用其他的插件语言,这种机制在jade里面称为filter,在jade里面加入过滤器用冒号 markdown ...
- linux(3)
一.用户和组的管理 Linux/Unix是多用户系统: root是超级用户,拥有最高权限.其它用户及权限由root来管理.对比Windows系统: 控制面板 -> 管理工具 -> 计算机管 ...
- Paper Reading:ION
Inside-Outside Net (ION) 论文:Inside-Outside Net: Detecting Objects in Context with Skip Pooling and R ...
- bind(),call(),apply()
call .bind . apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了: call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 ob ...