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,一经查实,立即删除!

相关文章

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 。 给你一个长度为 偶…

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

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

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

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

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 开启新世界~负荷计算目的和意义低压供配…

上下伸缩代码_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…

LeetCode 1880. 检查某单词是否等于两单词之和

文章目录1. 题目2. 解题1. 题目 字母的 字母值 取决于字母在字母表中的位置,从 0 开始 计数。即,a -> 0、b -> 1、c -> 2,以此类推。 对某个由小写字母组成的字符串 s 而言,其 数值 就等于将 s 中每个字母的 字母值 按…

查询去除空值_SQL数据处理(五):SQL多表查询

一. 表的加法加法(union)。合并两张数据表course和course1/去除重复行重合【select 课程号,课程名称 from course union select 课程号,课程名称 from course1;】 输出结果两个表合并的数据若要保留重复的行数据(union all)【select 课程号,课程名称 from course union all sel…

WPS Office文档未保存怎么恢复

有时候用WPS Office时,文档还没保存,因为电脑卡死或者关机,再次打开时编辑的内容都不见了,这个时候可以利用WPS自带的备份功能来恢复文档,表格、幻灯片、文档都是可以的。 首先单击WPS左上角的按钮,选择&qu…

LeetCode 664. 奇怪的打印机(区间DP)

文章目录1. 题目2. 解题1. 题目 有台奇怪的打印机有以下两个特殊要求: 打印机每次只能打印由 同一个字符 组成的序列。每次可以在任意起始和结束位置打印新字符,并且会覆盖掉原来已有的字符。 给你一个字符串 s ,你的任务是计算这个打印机…

程序闪退怎么运行_苹果应用程序崩溃闪退怎么办?如何解决苹果设备的软故障?...

你们在使用苹果设备的时候是不是经常遇到程序卡死,或者苹果设备假死的情况?如果您遇到程序崩溃闪退或报错的时候,请不要慌张,按照以下方法解决问题。苹果设备它是应用程序问题还是设备故障?首先,您必须弄清…

lxrun不是内部或外部命令_在Win10 安装 WSL的Linux子系统,解决cmd中执行lxrun时提示“不是内部或外部命令”...

Win10 安装Linux子系统原理就是安装一个(Linux系统的)应用程序。使用应用程序一般的使用Linux子系统,非常方便。第一步:启用开发者模式启用开发者模式,其实很简单,本人参考的是该文章:手把手教你…

LeetCode 1886. 判断矩阵经轮转后是否一致

文章目录1. 题目2. 解题1. 题目 给你两个大小为 n x n 的二进制矩阵 mat 和 target 。 现 以 90 度顺时针轮转 矩阵 mat 中的元素 若干次 ,如果能够使 mat 与 target 一致,返回 true ; 否则,返回 false 。 示例 1: …