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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
原生js实现放大镜效果
Jan 11 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
js实现秒表计时器
Dec 16 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中的类-什么叫类
2006/11/20 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP chop()函数讲解
2019/02/11 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
js面向对象编程总结
2017/02/16 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
Python实现备份文件实例
2014/09/16 Python
python通过socket查询whois的方法
2015/07/18 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Pycharm修改python路径过程图解
2020/05/22 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
白色公司:The White Company
2017/10/11 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
开会迟到检讨书
2014/01/08 职场文书
超市端午节活动方案
2014/01/23 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
绩效工资实施方案
2014/03/15 职场文书
产品质量承诺书范文
2014/03/27 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
您对思维方式了解多少?
2019/12/09 职场文书