vue 路由懒加载 resolve vue-router配置
使用方法
component:resolve => require(['@/pages/About'],resolve) //"@"相当于".."
懒加载
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) export default new Router({
mode:'history',
routes: [
{
path:'/',
redirect:'/index'
},
{
path: '/about',
name: 'About',
component:resolve => require(['@/pages/About'],resolve)
},
{
path: '/index',
name: 'Index',
component:resolve => require(['@/pages/Index'],resolve)
},
{
path: '/product',
name: 'Product',
component:resolve => require(['@/pages/Product'],resolve)
}
]
})
非懒加载
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/pages/About'
import Index from '@/pages/Index'
import Product from '@/pages/Product'
Vue.use(Router) export default new Router({
mode:'history',
routes: [
{
path:'/',
redirect:'/index'
},
{
path: '/about',
name: 'About',
component:About
},
{
path: '/index',
name: 'Index',
component:Index
},
{
path: '/product',
name: 'Product',
component:Product
}
]
})
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。
vue 路由懒加载 resolve vue-router配置的更多相关文章
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- vue 路由懒加载 使用,优化对比
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...
- vue路由懒加载
大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...
- vue路由懒加载,babel-loader无法处理/使用 import
使用vue-router懒加载,代码如下: 但是npm run dev 的时候 babel-loader报错如下: 查阅各种资料终于解决. 问题原因: 这种情况下的 import 属于异步引用组件,需 ...
- Vue图片懒加载插件 - vue lazyload的简单使用
Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...
- 两段代码实现vue路由懒加载
const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...
随机推荐
- Typora---markdown
一级标题 空格 编写内容 有序内容 +Tab 无序内容 -+Tab 代码块 print('hello world!') typora快捷键 标题1==ctrl +1 图片 表格 Ctrl + T 姓名 ...
- module.exports exports npm --save
CommonJS模块规范和ES6模块规范完全是两种不同的概念 Node应用由模块组成,采用CommonJS模块规范 var x = 5; var addX = function (value) { r ...
- spring中spEL常用应用场景
spEL表达式表示:#{} 一.基本类型值运算操作 {}可以放置数字,字符串,布尔型,表达式(运算,正则,逻辑).这个应用场景和EL表达式一样的,实际中用的也不多. 注意:在XML中表示==,> ...
- open函数的打开标志所在文件
/usr/include/x86_64-linux-gnu/bits/fcntl-linux.h
- 现代操作系统第三版高清.pdf中文版免费下载
百度云盘:链接: https://pan.baidu.com/s/1i57XmxJ 密码: rmga
- 深入理解JAVA虚拟机 垃圾收集器和内存分配策略
引用计数算法 很多教科书判断对象是否存活的算法是这样的:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器都为0的对象就是不可能再被使用的 ...
- MySQL中添加、修改、删除约束
https://blog.csdn.net/dz77dz/article/details/82119000 主要包含的约束: 非空.唯一.check.not null.默认值.主键.外键
- java数据结构--array与ArrayList的区别
ArrayList 内部是由一个array 实现的. 如果你知道array 和 ArrayList 的相似点和不同点,就可以选择什么时候用array 或者使用ArrayList , array 提供 ...
- 用class语法派生Enum并增加描述值的类属性来定义一个新枚举
import enum class BugStatus(enum.Enum): new = 7 incomplete = 6 invalid = 5 wont_fix ...
- python接口自动化四(json数据处理)
前言 有些post的请求参数是json格式的,这个前面第二篇post请求里面提到过,需要导入json模块处理. 一般常见的接口返回数据也是json格式的,我们在做判断时候,往往只需要提取其中几个关键的 ...