Vue异步加载about组件


Posted in Javascript onOctober 31, 2017

本文实例为大家分享了Vue异步加载about组件的具体代码,供大家参考,具体内容如下

异步加载about组件

about.js

Vue.component('about', {template: '<div>ABOUT PAGE</div>'});

html代码:

<div id="app">
    <router-link to="/home">/home</router-link>
    <router-link to="/about">/about</router-link>
    <router-view></router-view>
  </div>
  <script src="static/js/vue.min.js"></script>
  <script src="static/js/vue-router.js"></script>
  <script>
    function load (componentName, path) {
      return new Promise(function (resolve, reject){
        var script = document.createElement('script');
        script.src = path;
        script.async = true;
        script.onload = function () {
          var component = Vue.component(componentName);
          if (component) {
            resolve(component);
          } else {
            reject();
          }
        }
        document.body.appendChild(script);
      });
    }
    var router = new VueRouter({
      routes: [{
        path: '/',
        redirect: '/home'
      }, {
        path: '/home',
        component: {
          template: '<div>HOME PAGE</div>'
        }
      },{
        path: '/about',
        component: function (resolve, reject) {
          load('about', 'static/js/business/about.js').then(resolve, reject);
        }
      }]
    });
    var app = new Vue({
      el: '#app',
      router: router
    });
  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery来定位
Feb 20 Javascript
学习YUI.Ext 第三天
Mar 10 Javascript
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
javascript中的this作用域详解
Jul 15 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 #Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 #Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
一些常用的Javascript函数
2006/12/22 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python的等深分箱实例
2019/11/22 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
介绍一下游标
2012/01/10 面试题
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
最新党员的自我评价分享
2013/11/04 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
文艺委员竞选稿
2015/11/19 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
javascript函数式编程基础
2021/09/15 Javascript
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
详解PyTorch模型保存与加载
2022/04/28 Python