vueRouter lazyLoad
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/hello/index.vue'
// import Demo from '@/components/demo/index.vue' Vue.use(Router)
//vue路由懒加载
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
// component: HelloWord,//非懒加载
// component: () => import('@/components/hello/index.vue')//ES6懒加载
component: resolve => require(['@/components/hello/index.vue'],resolve)//ES5懒加载
},
{
path: '/demo',
name: 'demo',
component: () => import('@/components/demo/index.vue')
}
]
})
vueRouter lazyLoad的更多相关文章
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- vue-router(2.0)
用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...
- 图片的赖加载(lazyLoad)
懒加载的意义(在线demo预览) 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3.gulp等等,但是如果图片太多还是会影响页面的加载速度,快则几十 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- vue-router
官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) ...
随机推荐
- vim之快速查找功能
vim有强大的字符串查找功能. 我们通常在vim下要查找字符串的时候, 都是输入 / 或者 ? 加 需要查找的字符串来进行搜索,比如想搜索 super 这个单词, 可以输入 /super 或者 ...
- centos7下kubernetes(17。kubernetes-回滚)
kubectl apply每次更新应用时kubernetes都会记录下当前配置,保存为一个revision(版次),这样就可以回滚到某个特定的revision 默认配置下,kubernetes只会保留 ...
- redis分页摘抄
Redis 笔记与总结8 PHP + Redis 信息管理系统(分页+好友关注) 分页 要对列表页进行分页,需要知道: ①用户总数 $count ② 页大小 $pageSize:用户自定义 ③ 当前页 ...
- sigsuspend()阻塞:异步信号SIGIO为什么会被截胡?
关键词:fcntl.fasync.signal.sigsuspend.pthread_sigmask.trace events. 此文主要是解决问题过程中的记录,内容有较多冗余.但也反映解决问题中用到 ...
- yum 彻底删除nodejs,重新安装
第一步 用自带的包管理先删除一次 yum remove nodejs npm -y1手动删除残留 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹进入 /us ...
- python __init__() 和__new__()简析
先看下面一个例子: 如上图,例1中,构造了函数Foo,并重写了__new__()和__init__()方法,在实例化Foo()的时候,却只调用了__new__() 例2中,在实例化Too()对象时,同 ...
- c++学习之初话 函数指针和函数对象 的因缘
函数指针可以方便我们调用函数,但采用函数对象,更能体现c++面向对象的程序特性. 函数对象的本质:()运算符的重载.我们通过一段代码来感受函数指针和函数对象的使用: int AddFunc(int a ...
- OracleSql语句学习(五)
--数据库对象数据库对象包含:表,视图,索引,序列视图VIEN视图在SQL语句中体现的角色与表一样,但是视图并非真实存在的表,它只是对应一条查询语句的结果集 使用视图通常是为了重用子查询,简化SQL语 ...
- 【学习总结】GirlsInAI ML-diary day-8-list列表
[学习总结]GirlsInAI ML-diary 总 原博github链接-day8 认识list列表 新的数据类型:list. list是一种有序的集合,可以随时添加和删除其中的元素(链表??) 1 ...
- AngularJS 1.x系列:AngularJS简介及第一个应用(2)
1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...