vue路由懒加载的实现方法


Posted in Javascript onMarch 12, 2018

本文介绍了vue的路由懒加载,分享给大家,具体如下:

我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。

  1. component可以是一个箭头函数,我们可以使用动态 import语法来定义代码分块点;
  2. 如果想在network里面看到动态加载的组件名字,可以加webpackChunkName;
  3. 同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName

代码

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件,component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字,可以加webpackChunkName,同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

注意 上面的@代表当前src目录,具体可以去参考webpack的配置

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

分析

创建了home和todos两个组件使用了路由懒加载,配置好之后我们执行npm run dev来运行项目,打开network之后刷新一下,我们会发现加载了home.js,我们会发现和上面定义的webpackChunkName名字一样,同时点todos会加载todo.js。这就是路由懒加载的简单使用。

其他

在main.js里面项目的入口我们可以使用template的语法,也可以使用render函数

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: '<App/>'
 render() {

  return (
   <div>
    <App></App>
   </div>
  )
 } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
express express-session的使用小结
Dec 12 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 #Javascript
javascript变量提升和闭包理解
Mar 12 #Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 #Javascript
You might like
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript函数详解
2014/11/17 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
手机端转换rem适应
2017/04/01 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python里反向传播算法详解
2020/11/22 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
装修协议书范本
2014/04/21 职场文书
奉献演讲稿范文
2014/05/21 职场文书
房展策划方案
2014/06/07 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
市场部岗位职责
2015/02/12 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
导游词之桂林山水
2019/09/20 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python