正常配置

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-router路由懒加载(解决vue项目首次加载慢)

vue-router路由懒加载的更多相关文章

  1. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  2. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  3. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  4. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...

  5. vue router按需加载

    import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...

  6. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  7. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  9. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  10. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

随机推荐

  1. 由于link顺序错误导致的undefined reference

    其实我之前就遇到过这个问题,也强调过,GNU-G++在link阶段是依赖输入的.o或者.a文件的顺序的.如果顺序错误会导致undefined reference错误 见这篇随笔:http://www. ...

  2. C++-教程3-VS2010C++各种后缀说明

    相关资料:"http://blog.csdn.net/kibaamor/article/details/18700607""http://blog.chinaunix.n ...

  3. 一款基于jQuery和HTML5全屏焦点图

    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...

  4. zend Studio10.6.2破解注册码

    下载破解包:http://download.csdn.net/detail/gsls200808/7982115 安装方法:破解的jar文件com.zend.verifier_10.6.2.v2014 ...

  5. imx6 MfgTool分析

    解析freescale的MfgTool中的脚本,了解imx6, android系统的分区情况. 配置文件 1. cfg.ini [profiles] chip = MX6DL Linux Update ...

  6. ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  7. 【UVa】Jump(dp)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. sudo执行脚本找不到环境变量解决方法

    问题: 当普通用户下,设置并export一个变量,然后利用sudo执行echo命令,能得到变量的值,但是如果把echo命令写入脚本, 然后再sudo执行脚本,就找不到变量,未能获取到值. 原因 sud ...

  9. HttpModule的简单示例

    1.HttpModule可用在asp.net 管线事件触发的过程中.. 可处理一些通用的操作,如给特定请求加 gzip压缩. 2.示例代码: using System; using System.We ...

  10. [转]Oracle dbms_random函数用法快速生成多条测试数据

    Java 随机生成中文姓名,手机号,邮编,住址:http://blog.csdn.net/xiaokui_wingfly/article/details/45913885 Java 批量随机生成身份证 ...