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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
javascript中this关键字详解
Dec 12 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
package.json各个属性说明详解
Mar 11 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
php数组键名技巧小结
2015/02/17 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
js实现图片360度旋转
2017/01/22 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python如何生成树形图案
2018/01/03 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python自动抢红包教程详解
2019/06/11 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
教师评优事迹材料
2014/01/10 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
公司节能减排方案
2014/05/16 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python