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 ...
随机推荐
- XFire创建WebService实例应用
[转自] http://clq9761.iteye.com/blog/1261963 XFire创建WebService实例应用 XFire使得在JavaEE应用中发布Web服务变得轻而易举.和其他W ...
- 【网络】访问控制列表(ACL)
目的:172.16.12.1可以telnet到172.16.12.254,但是无法ping通172.16.12.254 Router0配置: 配置enable密码(必须,否则无法进入特权模式): r1 ...
- 剑指offer——面试题11:旋转数组的最小数字
#include"iostream" using namespace std; int GetMinNumber(int *data,int len) { ,right=len-, ...
- 转 Monitoring Restore/Recovery Progress
ora-279 是可以忽略的报错 In general, a restore should take approximately the same time as a backup, if not l ...
- Promise个人笔记---【Promise的前世今生】
Promise第一版本 案例是使用Node.js内置的fs模块[就是文件系统模块,负责读写文件.]来模拟异步操作 const fs = require('fs'); function getFileP ...
- 抱歉最近朋友结婚去浪了几天~未来几天会正常更新.今天带来XML文件解析
三种解析方法 DOM,SAX,XMLPullParse;你以为我要讲三种嘛 错 ,我只讲一种 ,其他两种我只是说下优缺点, 一.DOM解析器 优点: DOM解析器在解析XML文档时,会把文档中的所有元 ...
- TOJ 3486 Divisibility
Description On the planet Zoop, numbers are represented in base 62, using the digits 0, 1, . . . , 9 ...
- html 复选框checkbox
统计选中复选框的个数 <html> <head> <title> </title> <script> function static_num ...
- 命令行编译java项目
命令行编译java项目 项目名: testproj 目录 src -> cn -> busix -> test bin lib 编译项目 cd testproj javac -d . ...
- nyoj 139——我排第几个|| nyoj 143——第几是谁? 康托展开与逆康托展开
讲解康托展开与逆康托展开.http://wenku.baidu.com/view/55ebccee4afe04a1b071deaf.html #include<bits/stdc++.h> ...