vue-router异步加载组件
export default {
routes: [ {
path: '/fund',
name: 'FundManagement',
component: function(resolve) {
resolve(require('userManage'))
},
children: [{
path: '/fund/fundlist',
name: 'FundList',
component: function(resolve) {
require.ensure(['fundList'], () => {
resolve(require('fundList'))
});
},
meta: {
menuName: '基金列表'
}
}, {
path: '/fund/intelliComb',
name: 'IntelliComb',
component: function(resolve) {
require.ensure(['intelliComb'], () => {
resolve(require('intelliComb'))
});
},
meta: {
menuName: '智能组合产品'
}
}, ]
},
]}
同步:
component: function(resolve) {
resolve(require('userManage'))
}
异步:
component: function(resolve) {
require.ensure(['fundList'], () => {
resolve(require('fundList'))
});
},
vue-router异步加载组件的更多相关文章
- Vue中router路由异步加载组件-优化性能
何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- React.lazy和React.Suspense异步加载组件
在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() ...
- vue按需加载组件,异步组件
说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...
- vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...
- react异步加载组件
1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- vue 里面异步加载高德地图
前言 关于Vue 里面使用异步加载高德地图 项目中其实只有几处需要用到地图,不需要全局引入 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不 ...
- vue swiper异步加载轮播图,并且懒加载
参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...
- vue router 懒加载实现
在vue-cli脚手架中router文件夹中有index.js文件,里面的内容是 import Vue from 'vue'import Router from 'vue-router'import ...
随机推荐
- U盘安装CentOS 7错误 /dev/root does not exist, could not
问题: U盘安装CentOS 7,显示/dev/root does not exist, could not boot 解决方法: 1. 到windows里面查看U盘名称(例如 "Cento ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- Python 中下划线的 5 种含义
详细请参考这篇文章 单前导下划线:_var 单末尾下划线:var_ 双前导下划线:__var 双前导和末尾下划线:__var__ 单下划线:_
- 日志logback
http://tengj.top/2017/04/05/springboot7/ ------------------ logback使用指南. 公司配置 <?xml version=" ...
- Unity运用GPU代替CPU处理和计算简单测试
http://www.manew.com/thread-110502-1-1.html 随着游戏玩法的增强,计算的多量化,我们的CPU并不足以迅速的处理这些问题,而Unity给我们开放了一个接口,我们 ...
- ife task0003学习笔记(三):JavaScript闭包
一.this易错分析 在学习闭包的时候,有一个概念this很重要,关于this的理解,下面3种情况:this指向谁? fn.call(obj1); obj2.fn() fn() 答案是obj1 obj ...
- hash扩展攻击本地实验
记录一下自己对hash扩展攻击的一些理解,hash扩展攻击主要应用于身份认证,比如对于成功登录的用户可以赋予其一个采用hsah算法加密的cookie值,其中含有未知的密钥. 此后每次在服务器端验证此c ...
- sql 行列转换
create table #test1(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int) insert into #test1 valu ...
- Java Mail邮件发送的简单实现
1.什么是java mail JAVA MAIL是利用现有的邮件账户发送邮件的工具,通过JAVA Mail的操控,让程序自动的使用设置的邮箱发送邮件. 这一机制被广泛的用在注册激活和垃圾邮件的发送等方 ...
- 再写一篇ubuntu服务器的环境配置文
三年前写过一篇,但是环境和三年前比已经发生了比较大的变化,于是重新写一篇,自己以后再次配置也比较方便.我个人而言并没有觉得centos比ubuntu好用多少,所以继续选用ubuntu. 一.硬盘分区 ...