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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js 目录列举函数
Nov 06 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
关于vue-router路径计算问题
May 10 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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 array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
童装店创业计划书
2014/01/09 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
工作会议方案
2014/05/21 职场文书
邀请函格式范文
2015/02/02 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python