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>标签时才 ...
随机推荐
- Oracle nvl()函数处理null值
首先我先说一下什么是Oracle的函数,曾经有一位大牛,让我说说熟悉的oracle函数,我当时竟一头雾水,心想“什么oracle函数啊,不就是那些SQL语句吗“,当时我竟然说出了select之类的回答 ...
- 【hadoop】细读MapReduce的工作原理
前言:中秋节有事外加休息了一天,今天晚上重新拾起Hadoop,但感觉自己有点烦躁,不知后续怎么选择学习Hadoop的方法. 干脆打开电脑,决定: 1.先将Hadoop的MapReduce和Yarn基本 ...
- STM32 ID (转)
STM32唯一ID(Unique Device ID)的读取方法 (转) 每一个STM32微控制器都自带一个96位的唯一ID,也就是Unique Device ID或称为UID,这个唯一ID在任何 ...
- 自动化测试 selenium 模块 webdriver使用(一)
一.webdriver基本使用命令 from selenium import webdriver # 导入webdriver模块 >>> chrome_obj = webdriver ...
- 【shell】ping加时间戳回复
ping 192.168.2.1 -c 10 | awk '{ print $0"\t" strftime("%H:%M:%S",systime()) } ' ...
- Web缓存Cache、Application、Session与ViewState
在ASP.NET中,有很多种保存信息的对象.例如:APPlication,Session,Cookie,ViewState和Cache等,那么它们有什么区别呢?每一种对象应用的环境是什么? 方法 信息 ...
- C# Parallel 使用
ParallelLoopResult result = Parallel.For(, , i => { Console.WriteLine("{0}, task: {1}, threa ...
- How to find First Non-Repeated Character from String
You need to write a function, which will accept a String and return first non-repeated character, fo ...
- MongoDB 运维实总结
一.MongoDB 集群简介 MongoDB是一个基于分布式文件存储的数据库,其目的在于为WEB应用提供可扩展的高性能数据存储解决方案.下面将以3台机器介绍最常见的集群方案.具体介绍,可以查看官网 h ...
- 013_使用 user.txt 文件中的人员名单,在计算机中自动创建对应的账户并配置初始密码
for i in `cat user.txt`do useradd $i echo "123456" | passwd --stdin $idone