vue路由切换组件没有加载_Vue面试题: 如何实现路由懒加载?

e447318930dba4447b261d1246330c06.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'}]
}))

d53bd633ade5dbd285115910ba803345.gif

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

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

相关文章

python2d 平滑插值处理_python中平滑的、通用的2D线性插值

我已经设法写了一个符合我的目的的函数。它通过沿网格线插值,然后在x和y方向插值平面,并取两者的平均值,从坐标网格中插值(填充)平面。在通过将坐标重塑为一维矢量,一次性插值平面,然后再重新塑造为二维,应…

LeetCode 1865. 找出和为指定值的下标对(哈希)

文章目录1. 题目2. 解题1. 题目 给你两个整数数组 nums1 和 nums2 ,请你实现一个支持下述两类查询的数据结构: 累加 ,将一个正整数加到 nums2 中指定下标对应元素上。计数 ,统计满足 nums1[i] nums2[j] 等于指定值的下标对 (i,…

聚类算法 距离矩阵_快速且不需要超参的无监督聚类方法

论文: Efficient Parameter-free Clustering Using First Neighbor RelationsEfficient Parameter-free Clustering Using First Neighbor Relations​arxiv.org代码:https://github.com/ssarfraz/FINCH-Clustering​github.com此文是CVPR2019的oral文章…

服务器不知别内存_图文版 许迎果第63期 选购和使用内存需要注意的点

其实要说清楚内存的方方面面还是要颇费一番功夫的.内存的起源和发展历程估计要讲一期,内存厂商,颗粒,品牌也需要单独讲一期,内存超频也要单独讲一期.内存看似简单,但要说的内容却是很多的.所以为了节省各位小伙伴的时间,我会尽量精简,只讲对大多数人都比较实用的部分.本期大体上…

LeetCode 1877. 数组中最大数对和的最小值(贪心)

文章目录1. 题目2. 解题1. 题目 一个数对 (a,b) 的 数对和 等于 a b 。最大数对和 是一个数对数组中最大的 数对和 。 比方说,如果我们有数对 (1,5) ,(2,3) 和 (4,4),最大数对和 为 max(15, 23, 44) max(6, 5, 8) 8 。 给你一个长度为 偶…

5个经典的javascript面试问题

问题1:Scope作用范围 考虑下面的代码: (function() { var a b 5;})();console.log(b); 什么会被打印在控制台上? 回答 上面的代码会打印 5。这个问题的诀窍是,这里有两个变量声明,但 a 使用关键字var声明的。代表它…

python查看字符编码_python如何查看字符集

python查看字符集的方法:可以利用第三方库chardet来进行判断。通过在命令行下执行【pip install chatdet】命令来安装chardet。使用方法如:【chardet.detect(bHello, world!)】。Python利用第三方库chardet判断字符集。如果安装了Anaconda,ch…

小程序多个echars_小程序界面与逻辑

主要内容数据绑定、渲染、界面层数据渲染和事件处理。一、数据绑定1.1 渲染层和逻辑层小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。小程序开发框架的目标是通过尽可能简单、…

Bootloader启动过程

1、作用 嵌入式系统的引导加载程序,系统上电后运行的第一段程序。在完成对系统的初始化任务后,它会将非易失性存储器(通常是FLASH)中的Linux内核拷贝到RAM中,然后跳转到内核的第一条指令处继续执行,从而启动…

LeetCode 1876. 长度为三且各字符不同的子字符串

文章目录1. 题目2. 解题1. 题目 如果一个字符串不含有任何重复字符,我们称这个字符串为 好 字符串。 给你一个字符串 s ,请你返回 s 中长度为 3 的 好子字符串 的数量。 注意,如果相同的好子字符串出现多次,每一次都应该被记入…

python官方的扩展索引_Python列表操作与深浅拷贝(6)——列表索引、查询、修改、扩展...

列表list定义L1 []L2 [1,2,‘abc‘]L3list()L4 list(range(5))L5 [1,‘abc‘,True,None,[4,5,‘abc‘],str]isinstance(L5,list)True列表索引访问L6 list(range(5,10))L6[5, 6, 7, 8, 9]正索引:从下边界至上边界,从0开始,为列表中每一个元素…

numpy维度交换_数据分析-gt;基本操作numpy(1)

1.Numpy介绍与安装Numpy是什么?Numpy(Numerical Python)是目前Python数值计算中最为重要的基础包。大多数计算包都提供了基于Numpy的科学函数功能,将Numpy的数组对象作为数据交换的通用语。Numpy特点提供高效多维数组提供了基于数组的便捷算术操作以及广…

C#学习记录3上——类的封装,继承,多态

OOP面向对象的三大特点:封装(encapsulation),继承(inheritance),多态(encapsulation) 和JAVA与C一样,C#也是OOP语言。并且,C#对数据的封装要比C更…

LeetCode 1878. 矩阵中最大的三个菱形和(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个 m x n 的整数矩阵 grid 。 菱形和 指的是 grid 中一个正菱形 边界 上的元素之和。 本题中的菱形必须为正方形旋转45度,且四个角都在一个格子当中。 下图是四个可行的菱形,每个菱形和应该包含的格子都用了相应颜…

计算尖峰电流的目的_入门必看!负荷计算的目的、方法以及原则详解

感谢关注【易筑电气】,我们会定期为您推送最新的电气资讯和各类实用干货,欢迎有料的电气设计师加入我们的QQ交流群:571819142。想了解我们的线上讲师招募计划?添加QQ:3335847624 开启新世界~负荷计算目的和意义低压供配…

python多线程实现方式_python中实现多线程有几种方式?

我们都知道,代码编程不是固定的东西,而是非常灵活的内容,根据不同的内容,我们可以拓展出很多条内容,最终目的还是为了可以实现结果,给大家举例说明其中一个最常用的多线程吧~以及实现的几种方式。1. 用函数…

linux查看磁盘占用

df -h比如是/data很满cd /datadu -sh *就可以看出哪个文件夹大,重复上面一步即可转载于:https://www.cnblogs.com/fenle/p/4381236.html

上下伸缩代码_CQRS之旅——旅程4(扩展和增强订单和注册限界上下文)

旅程4:扩展和增强订单和注册限界上下文进一步探索订单和注册的有界上下文。“我明白,如果一个人想看些新鲜的东西,旅行并不是没有意义的。”儒勒凡尔纳,环游世界80天对限界上下文的更改:前一章详细描述了订单和注册限界…

LeetCode 1879. 两个数组最小的异或值之和(状态压缩DP)

文章目录1. 题目2. 解题2.1 回溯2.2 状态压缩DP1. 题目 给你两个整数数组 nums1 和 nums2 ,它们长度都为 n 。 两个数组的 异或值之和 为 (nums1[0] XOR nums2[0]) (nums1[1] XOR nums2[1]) ... (nums1[n - 1] XOR nums2[n - 1]) (下标从 0 开始&am…

二叉排序树的后序遍历序列必然是递增的_剑指offer 33——二叉搜索树的后序遍历序列...

本题主要在于考察对二叉搜索树和后序遍历的理解。原题输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true,否则返回 false。假设输入的数组的任意两个数字都互不相同。参考以下这颗二叉搜索树:5 / 2 6…