vue+webpack实现异步加载三种用法示例详解


Posted in Javascript onApril 24, 2018

1.第一例

const Home = resolve => {
  import("@/components/home/home.vue").then( module => {
      resolve(module)
  }
}

注:(上面import的时候可以不写后缀)

export default [{
  path: '/home',
  name:'home',
  component: Home,
  meta: {
    requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示
  },
}]

2.第二例

const router = new Router({
  routes: [
    {
       path: '/home',
       component: (resolve)=> {
         require(['../components/home/home'], resolve) // 省去了在上面去import引入
       }
     }
  ]
})

3.第三例,这也是推荐的一种

// r就是resolve// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 
const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home');
const router = new Router({
  routes: [
    {
     path: '/home/home',
     component: Home,
     name: 'home' ,
    }
  ]
})

下面给大家介绍下vue+webpack实现异步组件加载的代码,具体代码如下所示:

HTML

<input type="button" @click="showchild" value="show"> //点击按钮后,show为真,先获取child组件,再渲染div内容 
<div id="contain" v-if="show">
  <child></child>
</div>

JS

data () {
  return {
    msg: 'Welcome to Your Vue.js App',
    show:false
  }
},
methods: {
  showchild:function(){
    this.show=true;
  }
},
components: {
  'child': function(resolve) {
    require(['./components/child.vue'], resolve);
  }
}

注意:加载异步组件的时候,组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真,由于child.vue是异步组件,所以会先ajax获取组件然后渲染。

总结

以上所述是小编给大家介绍的vue+webpack实现异步加载三种用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
纯js实现动态时间显示
Sep 07 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
基于JSON数据格式详解
Aug 31 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
vue实现树形菜单效果
Mar 19 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
vue webpack实用技巧总结
Apr 24 #Javascript
You might like
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
详解Python编程中time模块的使用
2015/11/20 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
年会活动策划方案
2014/01/23 职场文书
学校元旦晚会方案
2014/02/19 职场文书
活动总结怎么写啊
2014/05/07 职场文书
博士生专家推荐信
2015/03/25 职场文书
亮剑精神观后感
2015/06/05 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android