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 ...
随机推荐
- nginx+uwsgi+virtualenv+supervisor部署项目
一.导论 WSGI是Web服务器网关接口.它是一个规范,描述了Web服务器如何与Web应用程序通信,以及Web应用程序如何链接在一起以处理一个请求,(接收请求,处理请求,响应请求) 基于wsgi运行的 ...
- PIE SDK常用滤波
1. 算法功能简介 空间域滤波实在图像空间( x. y)对输入图像应用滤波函数(核.模板)来改进输出图像的处理方法,主要包括平滑和锐化处理,强调像素与其周围相邻像素的关系,常用的方法是卷积运算. 空间 ...
- 授权过期后AJAX操作跳转到登录页的一种全局处理方式
前两天园友JustRun分享了一篇 <菜鸟程序员之Asp.net MVC Session过期异常的处理>博文,正好自己前段时间被安排处理过这个问题,发现JustRun的方法有一点点可优化的 ...
- 「BZOJ1485」[HNOI2009] 有趣的数列 (卡特兰数列)
「BZOJ1485」[HNOI2009] 有趣的数列 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai ...
- x86的字节对齐与不对齐的问题
比如这么一个结构体struct foo {short s;int n;}; struct foo bar;假设bar的地址是0x12345670如果不按4字节对齐那么bar.n的地址就是0x123 ...
- GreenPlum 大数据平台--web监控
一,安装web监控界面 01,准备 下载greenplum cc包,>> 解压缩 02,安装前配置 vim /greenplum/data/master/gpseg-/pg_hba.con ...
- yum lnmp全家桶
######################################################### #by:kingle # #use: lnmp # #version:1.0 # # ...
- SQL Server 2008 SQL2012 SQL2014 收缩日志 清空删除大日志文件
SQL2008 SQL2012 SQL2014 的收缩日志 由于SQL2008对文件和日志管理进行了优化,所以以下语句在SQL2005中可以运行但在SQL2008中已经被取消:(SQL2005)Bac ...
- TOJ 3031 Multiple
Description a program that, given a natural number N between 0 and 4999 (inclusively), and M distinc ...
- 自己用 python 实现 base64 编码
自己用 python 实现 base64 编码 base64 编码原理 二进制文件中包含有很多无法显示和打印的字符,二进制的数据一般以 ASCII 码形式(8 bit,即一个字节)存储,8 bit 可 ...