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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php 类自动载入的方法
2015/06/03 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
asm.js使用示例代码
2013/11/28 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python实现倒计时的示例
2014/02/14 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
单位接收函格式
2015/01/30 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
物资采购管理制度
2015/08/06 职场文书
vue实现在data里引入相对路径
2022/06/05 Vue.js
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技