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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
mock.js模拟数据实现前后端分离
Jul 24 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
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php xhprof使用实例详解
2019/04/15 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JSONP跨域请求
2017/03/02 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python构建深度神经网络(续)
2018/03/10 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
家庭贫困证明
2015/06/16 职场文书
教师继续教育反思周记
2015/06/25 职场文书
数据库连接池
2021/04/06 MySQL
python实现简单倒计时功能
2021/04/21 Python
python中如何对多变量连续赋值
2021/06/03 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技