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 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
宠物店的创业计划书范文
2014/01/11 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
2015年元旦活动总结
2014/05/09 职场文书
纪律教育月活动总结
2014/08/26 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
欢送领导祝酒词
2015/08/12 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python