Vue-异步组件
一般情况下,在代码开头引入组件:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/city',
name: 'City',
component: City
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
打开控制台检查一下:
我们想访问首页的时候只加载首页的代码,加载详情页的时候再加载详情页的代码,需要按需加载:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home')
},
{
path: '/city',
name: 'City',
component: () => import('@/pages/city/City')
},
{
path: '/detail/:id',
name: 'Detail',
component: () => import('@/pages/detail/Detail')
}
]
})
打开控制台检查一下:
Vue-异步组件的更多相关文章
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- 揭开Vue异步组件的神秘面纱
简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...
- vue异步组件?
为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义.Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染Vue.compo ...
- vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- Vue动态组件&异步组件
在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...
- Vue动态注册异步组件(非同一个工程的组件)
前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...
- 极简Vue的异步组件函数
export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/v ...
随机推荐
- [零] JavaIO入门简介 程序设计语言 为什么需要IO库
本文旨在引申出来Java IO的概念含义,作为学习JavaIO一个起步的了解知识点 部分内容引自<计算机操作系统第三版> 操作系统的文件管理 "在现代计算机系统中,要用到 ...
- 学习编写Dockerfile
前言 我们学习docker的话,其主要目的还是要用来改变我们部署应用程序的传统习惯,达到解放生产力,解放人力的目的.这篇则自己来熟悉一下dockerfile常用命令.并且尝试改变下生产环境手动部署应用 ...
- ajax跨域请求,亲测有效
跨域请求域有两种常用解决方案,jsonp和cors, 因为jsonp只能解决get请求问题,我这里用的是cors方法. js前端ajax请求: $.ajax({ url: "http://1 ...
- [JavaScript] audio在浏览器中自动播放
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...
- [转]layui点击左侧导航栏,实现不刷新整个页面,只刷新局部
本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...
- 博弈论进阶之SG函数
SG函数 个人理解:SG函数是人们在研究博弈论的道路上迈出的重要一步,它把许多杂乱无章的博弈游戏通过某种规则结合在了一起,使得一类普遍的博弈问题得到了解决. 从SG函数开始,我们不再是单纯的同过找规律 ...
- #WEB安全基础 : HTML/CSS | 0x6嵌套标签(图片链接)
嵌套标签我们已经讲一次了,在0X4.1里,我们把列表嵌套了 你觉得文字链接难看得令人作呕,好,你再也不会有这种感觉了 一如既往,一个html文件和一个存放图片的文件夹 index.html的代码, ...
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Git:五、操作远程仓库
0.一般流程 1)自己新写:GitHub创建有README的库 -> clone到本地 2)修改已有:GitHub上fork别人的仓库 -> clone自己账号下的库到本地 1.创建库 右 ...
- 从 RAID 到 Hadoop Hdfs 『大数据存储的进化史』
我们都知道现在大数据存储用的基本都是 Hadoop Hdfs ,但在 Hadoop 诞生之前,我们都是如何存储大量数据的呢?这次我们不聊技术架构什么的,而是从技术演化的角度来看看 Hadoop Hdf ...