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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
各种常用的JS函数整理
Oct 25 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
js数组操作常用方法
May 08 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
php array_merge下进行数组合并的代码
2008/07/22 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
ES6基础之默认参数值
2019/02/21 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
基于python历史天气采集的分析
2019/02/14 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
常见的软件开发流程有哪些
2015/11/14 面试题
自我评价的范文
2014/02/02 职场文书
有关环保的标语
2014/06/13 职场文书
贷款担保书
2015/01/20 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技