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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python中常见的数据类型小结
2015/08/29 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
老教师工作总结的自我评价
2013/09/27 职场文书
党员入党表决心的话
2014/03/11 职场文书
小学开学典礼主持词
2014/03/19 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫