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 相关文章推荐
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 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 字符串函数收集
2010/03/29 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python使用tornado实现登录和登出
2018/07/28 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
基于python操作ES实例详解
2019/11/16 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python em算法的实现
2020/10/03 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
应届生高等护理求职信
2013/10/12 职场文书
微观物理专业自荐信
2014/01/26 职场文书
学校联谊活动方案
2014/02/15 职场文书
法院授权委托书格式
2014/09/28 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
教师旷工检讨书
2015/08/15 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
Go中的条件语句Switch示例详解
2021/08/23 Golang