react.lazy 路由懒加载_Vue面试题: 如何实现路由懒加载?

79e4b6d25626e5313e79e23e800bfdc8.png

非懒加载

import List from '@/components/list.vue'
const router = new VueRouter({routes: [{ path: '/list', component: List }]
})

方案一(常用)

const List = () => import('@/components/list.vue')
const router = new VueRouter({routes: [{ path: '/list', component: List }]
})

方案二

const router = new Router({routes: [{path: '/list',component: (resolve) => {// 这里是你的模块 不用import去引入了require(['@/components/list'], resolve)}}]
})

方案三

使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({routes: [{path: '/list',component: List,name: 'list'}]
}))

7106658cf9476cf48788cf25cc7b1fe0.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/446270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STL源码剖析 deque双端队列 概述

vector是单向开口的连续线性空间,deque是一种双向开口的连续线性空间。deque可以在头尾两端分别进行元素的插入和删除操作vector和deque的差异 1,deque允许常数时间内对于头端元素进行插入和删除操作2,deque没有所谓容量(capacity)的概念&…

STL源码剖析 stack 栈 概述->(使用deque双端队列 / list链表)作为stack的底层容器

Stack是一种先进后出的数据结构,他只有一个出口stack允许 新增元素、移除元素、取得最顶端的元素,但是无法获得stack的内部数据,因此satck没有遍历行为Stack定义的完整列表 (双端队列作为Stack的底层容器) 将deque作为Stack的底部结构&#…

python怎么实现图像去噪_基于深度卷积神经网络和跳跃连接的图像去噪和超分辨...

Image Restoration Using Very Deep Convolutional Encoder-Decoder Networks with Symmetric Skip Connections作者:Xiao-Jiao Mao、Chunhua Shen等本文提出了一个深度的全卷积编码-解码框架来解决去噪和超分辨之类的图像修复问题。网络由多层的卷积和反卷积组成&a…

STL源码剖析 queue队列概述

queue是一种先进先出的数据结构,他有两个出口允许新增元素(从最底端 加入元素)、移除元素(从最顶端删除元素),除了对于顶端和底端元素进行操作之外,没有办法可以获取queue的其他元素即queue没有…

python为什么运行不了_python为什么会环境变量设置不成功

学习python编程,首先要配置好环境变量。本文主要讲解python的环境变量配置,在不同版本下如何安装 Windows 打开Python官方下载网站 x86:表示是32位电脑 x86-64:表示是64位电脑 目前Python版本分为2.x版本和3.x版本。推荐大家使用3.x版本。 设置环境变量&…

STL 源码剖析 heap堆

heap不属于STL容器的组件,属于幕后角色,是priority_queue的助手priority_queue 允许用户以任何次序将任何元素推入容器内,但是取出的时候需要从优先级最高(也就是数值最高)的元素开始取,这种思想是基于heap的函数实现如果使用list…

java 打印星号

代码1 package lesson.l2_for; //6列4行 //****** //****** //****** //****** public class ForDemo8 {public static void main(String[] args) {for (int i1;i<4;i){for (int j 1; j <6 ; j) {System.out.print("*");}System.out.println();}} }代码2 pa…

python从小白到大牛百度云盘_Java从小白到大牛 (关东升著) 中文pdf+mobi版[36MB]

《Java从小白到大牛》是一本Java语言学习立体教程&#xff0c;读者群是零基础小白&#xff0c;通过本书的学习能够成为Java大牛。主要内容包括&#xff1a;Java语法基础、Java编码规范、数据类型、运算符、控制语句、数组、字符串、面向对象基础、继承与多态、抽象类与接口、枚…

java打印九九乘法表

代码1 package lesson.l5_loop; //九九乘法表 //1*11 //2*12 2*24 //3*13 3*26 3*39 //4*14 4*28 4*312 4*416 //5*15 5*210 5*315 5*420 5*525 //6*16 6*212 6*318 6*424 6*530 6*636 //7*17 7*214 7*321 7*428 7*535 7*642 7*749 //8*18 8*216 8*324 8*432 8*540 8*648 8*75…

STL源码剖析 priority_queue

priority_queue是一个拥有权重概念的queue&#xff0c;允许底部加入新的元素&#xff0c;头部删除旧的元素&#xff0c;以及审视元素数值的操作priority_queue带有权重的概念&#xff0c;即元素按照权重进行排列&#xff0c;而不是按照插入队列的顺序进行排序。要求权值高者在前…

python数字1 3怎么表示_Python入门篇之数字

数字类型 数字提供了标量贮存和直接访问。它是不可更改类型&#xff0c;也就是说变更数字的值会生成新的对象。当然&#xff0c;这个过程无论对程序员还是对用户都是透明的&#xff0c;并不会影响软件的开发方式。 Python 支持多种数字类型&#xff1a;整型、长整型、布尔型、双…

STL源码剖析 slist单向链表概述

概述 SGI STL的list是一个双向链表&#xff0c;单向链表是slist&#xff0c;其不在标准规格之内单向和双向链表的区别在于&#xff0c;单向链表的迭代器是单向的 Forward Iterator&#xff0c;双向链表的迭代器属于双向的Bidirectional Iterator。因此很多功能都被受限但是单向…

output怎么用_用树莓派实现室内温度监控

树莓派加上温度传感器实现室内温度监控。可用于家庭&#xff0c;轿车&#xff0c;工业&#xff0c;农业 等许多方面。可做温度预警&#xff0c;自动降温等操作。各位小伙伴可自行脑补发挥。1.硬件准备a.树莓派&#xff08;Raspberry Pi&#xff09;一个b.DS18B20温度传感器一个…

STL源码剖析 关联式容器

STL关联式容器以set(集合) 和 map(映射表)两大类&#xff0c;以及对应的衍生体构成,比如mulyiset(多键集合) multimap(多键映射表) ,容器的底层均基于红黑树RB-Tree也是一个独立的容器&#xff0c;但是不对外开放此外还提供了标准之外的关联式容器 hash table散列表&#xff0c…

STL源码剖析 关联式容器 红黑树

概念 红黑树不仅仅是一个二叉树&#xff0c;必须满足如下条件1&#xff0c;每个节点不是红色就是黑色 (深色底纹为黑色&#xff0c;浅色底纹为红色)2&#xff0c;根节点是黑色的3&#xff0c;如果节点为红&#xff0c;其子节点必须为黑色的4&#xff0c;任一节点至NULL(树的尾…

python生成的词云没有图案_还在为专栏封面发愁?我用Python写了个词云生成器!...

妈妈再也不用担心我写专栏找不到合适的封面了&#xff01;B站专栏的封面至少是我一直头疼的问题&#xff0c;每次写完文章却找不到合适的图片作为封面。 词云是一个很不错的选择&#xff0c;既美观&#xff0c;又提纲挈领。网上也有词云生成的工具&#xff0c;但大多收费/只能试…

java 1000以内的完数

题目 代码 package lesson.l6_review;public class PrefectNumber {public static void main(String[] args) {for (int i 1; i <1000 ; i) {int num0;for (int j 1; j <i-1 ; j) {if (i%j0){numj;}}if (inum){System.out.print(i"\t");}}} }

STL源码剖析 map

所有元素会根据元素的键值自动被排序 元素的类型是pair&#xff0c;同时拥有键值和实值&#xff1b;map不允许两个元素出现相同的键值pair 代码 template <class T1,class T2> struct pair{typedef T1 first_type;typedef T2 second_type;T1 first; //publicT2 secon…

java api接口怎么写_Java 如何设计 API 接口,实现统一格式返回?

来源&#xff1a;老顾聊技术前言接口交互返回格式控制层Controller美观美化优雅优化实现方案前言在移动互联网&#xff0c;分布式、微服务盛行的今天&#xff0c;现在项目绝大部分都采用的微服务框架&#xff0c;前后端分离方式&#xff0c;(题外话&#xff1a;前后端的工作职责…

java 二维数组

声明和初始化 静态初始化 // 静态初始化&#xff1a; // 一维数组int[] arr1_1 {1, 2, 4};System.out.println(Arrays.toString(arr1_1)); // 二维数组int[][] arr1_2 {{1, 2}, {4, 5}, {9, 10}};for (int[] i :arr1_2) {System.out.print(Arrays.toS…