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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
js异或加解密效果代码
Jun 25 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
微信小程序顶部可滚动导航效果
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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python实现目录树生成示例
2014/03/28 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python 常用string函数详解
2016/05/30 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python实现图片识别汽车功能
2018/11/30 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python ATM功能实现代码实例
2020/03/19 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Django日志及中间件模块应用案例
2020/09/10 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
小学生家长评语大全
2014/02/10 职场文书
材料会计岗位职责
2014/03/06 职场文书
土地转让协议书
2014/04/15 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
教育实习指导教师评语
2014/12/31 职场文书
干部年终考核评语
2015/01/04 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS