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 相关文章推荐
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
浅析vue component 组件使用
Mar 06 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
Node学习记录之cluster模块
May 31 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
layer.js之回调销毁对话框的例子
Sep 11 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php错误级别的设置方法
2013/06/17 PHP
php Session存储到Redis的方法
2013/11/04 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
白酒市场营销方案
2014/02/25 职场文书
空气的环保标语
2014/06/12 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
社区宣传标语口号
2015/12/26 职场文书