vue-router路由懒加载
正常配置
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/pages/login'
import Capture from '@/components/pages/capture'
import List from '@/components/pages/list'
import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/capture',
name: 'Capture',
component: Capture
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: CaptureFail
}
]
})
懒加载配置
import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/components/pages/login'
// import Capture from '@/components/pages/capture'
// import List from '@/components/pages/list'
// import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: resolve => require(['@/components/pages/login'], resolve) // Login
},
{
path: '/capture',
name: 'Capture',
component: resolve => require(['@/components/pages/capture'], resolve) // Capture
},
{
path: '/list',
name: 'List',
component: resolve => require(['@/components/pages/list'], resolve) // List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: resolve => require(['@/components/pages/capture-fail'], resolve) // CaptureFail
}
]
})
说明
npm run build
后会新增路由数量相匹配的.js
文件,在切到相应路由时动态加载这个文件。
参考
vue-router路由懒加载的更多相关文章
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- vue的路由懒加载
路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- vue中路由懒加载实现amd加载文件
一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...
- vue router按需加载
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
随机推荐
- Windows Phone 性能优化(一)
在实际的项目开发过程中,应用的性能优化是一个永恒的话题,也是开发者群里最常讨论的话题之一,我在之 前的公司做 wp项目时,也遇到过性能的瓶颈.当页面中加载的内容越来越多时,内存涨幅非常明显(特别是 一 ...
- js基本知识6
1.2 复习 1. 节点 网页是有很多的节点组成的 . 元素节点 指的是 : 标签 li span 文本节点 属性节点 父子兄弟 父 parentNode nextSibling 孩子 childNo ...
- line: 1: Syntax error: word unexpected (expecting ")")
开发板上运行可执行程序报出错误: line1: 1: Syntax error: word unexpected (expecting ")") 解决思路: 1.编译器的问题 用a ...
- java服务端json结果集传值给前端的数据输出格式
在服务端输出json数据时按照一定的格式输出时间字段,fastjson支持两种方式:1.使用JSON.toJSONStringWithDateFormat方法2.JSON.toJSONString方法 ...
- lua工具库penlight--05日期和时间
创建和显示时间 Date类提过了简洁的使用date和time的方法.它依赖于os.date和os.time. Date对象可以通过table创建,如果os.date,同时提过了获取和设置date 成员 ...
- Maple重点知识总结
Maple中的evalf与evalhf evalf 可作用于单值 可作用于List 可作用于Set 可作用于Vector(<..>) 可作用于Matrix(<..|..|..> ...
- ansible ansible_os_family == "RedHat" and ansible_lsb.major_release|int >= 6 转为数字比大小
字符串转换为数字型再去比较 tasks: - shell: echo "only on Red Hat 6, derivatives, and later" when: ansib ...
- JsonNode、JsonObject常用方法
最近项目中要用json,闲暇时间,对json进行下总结. 1.JsonNode 项目中用到的jar包 import com.fasterxml.jackson.core.JsonParseExce ...
- git 删除分之以及删除文件夹
1.删除分支 1.1查看所有分支: git branch -a 得到结果: 1.2删除HEAD分支 git push origin --delete HEAD 2.删除文件夹 2.1 查看本地分支下的 ...
- json 转 T
T test = JsonConvert.DeserializeObject<T>(json);(json.net)