如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。 

正文

  我先用控制台创建了vue项目demo(如何创建可以参考我之前的写的笔记  http://www.cnblogs.com/atjinna/p/6723293.html)。由于单页面开发,会出现打包后的JavaScript包非常大,这会影响页面加载速度,那我们可以考虑使用懒加载去优化这个问题,因此

resolve出现了。具体参考下面: 

 1、引入 vue-router(由于使用的是控制台创建的项目,并且使用了webpack这个模板,所以可以省略这一步)  

  

  2、定义 component 指定变量   

     1)、先看下目录    

    2)、component 指定变量  


3、path路径注意点:  

参数名、页面路径、以及懒加载

补充

  我将整个router展示给大家看吧,这个其实是我上面提到的demo那个项目的代码

还在研究中,所以写得很青涩,也没有解释为何如此用,大家可以参考下文档吧 https://router.vuejs.org/zh-cn/api/options.html#routes 以及另一份文档https://cn.vuejs.org/v2/guide/  。哦,对了,我用的都是vue2,也建议大家使用vue2.  

vue懒加载 路由 router 的编写(resolve)的更多相关文章

  1. vue懒加载

    vue懒加载(白屏或者加载慢的解决方法) 懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异 ...

  2. 关于Vue懒加载问题

    有关Vue懒加载其实并不是想象的那么难和复杂: 首先引入 import  VueLazyLoad from 'vue-lazyload'; 其次是使用 Vue.use(VueLazyLoad,{ er ...

  3. 使用Webpack的代码分离实现Vue懒加载(译文)

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  4. 使用Webpack的代码分离实现Vue懒加载

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  5. angular配置懒加载路由的思路

    前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...

  6. vue懒加载 && 浏览器高度

    当我们进入首页时,可能有很多条目需要显示,但是如果条目太多,我们全部将之显示出来就会造成性能的消耗,比如,我在第一条就找到了需要的或者我就看前面两条我就不想看后面的了,所以,这时候如果使用全部加载的方 ...

  7. vue-lazyload 的vue 懒加载的使用

    vue-lazyload vue 图片懒加载的使用 下载 vue-lazyload npm i vue-lazyload -S 使用 vue-lazyload 在 src 下面的 main.js 的文 ...

  8. vue懒加载实现

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

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

随机推荐

  1. 71-n皇后

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. Django框架 之 admin管理工具(源码解析)

    浏览目录 单例模式 admin执行流程 admin源码解析 单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在 ...

  3. Java50道经典习题-程序32 左移右移

    题目:取一个整数a从右端开始的4-7位.分析:比如取123456789从右端开始的4-7位即:3456(1)先使a右移4位.(2)设置一个低4位全为1,其余全为0的数.可用~(~0<<4) ...

  4. String的split(String regex, int limit)方法小结

    split(String regex, int limit)方法,头一个参数String regex表示字符串分割的模式,包括分隔符和正则表达式:但是第二个参数limit比较迷糊人,api中这样解释: ...

  5. WebStorm设置Themes

    1.首先去 http://www.phpstorm-themes.com/  选择你喜欢的主题,保存对应主题的xml文件到你本地 2.打开C:\Users\Administrator\.WebStor ...

  6. Gazebo学习随记1 Gazebo概览

    Gazebo组件 World 世界 包含模拟中所有的元素如机器人,灯光,传感器等等 使用SDF(模拟描述格式)格式化 [用XML语言描述] 拓展名.world Model 模型 只包含一个<mo ...

  7. [Windows] 程序生成出现语法错误: 意外的令牌“标识符”,预期的令牌为“类型说明符”

    程序生成出现语法错误: 意外的令牌“标识符”,预期的令牌为“类型说明符” 将平台工具集改为VS 2015 (v140) ,重新编译即可

  8. Weekly Contest 114

    955. Delete Columns to Make Sorted II We are given an array A of N lowercase letter strings, all of ...

  9. Nginx——1.基础知识

    Nginx——1.基础知识 作为高速.轻量.高性能等优点集于一身的服务器,Nginx在近些年迅速发展并不断扩大市场份额,甚至在最近其市场份额一举超过微软的IIS,跃身到第二位,仅次于Apache. 但 ...

  10. kuangbin专题16D(next求最小循环节)

    题目链接: https://vjudge.net/contest/70325#problem/D 题意: 给出一个循环字符串, 可以在两端添加任意字符, 问最少添加多少字符可以使循环字符串变成周期循环 ...