
Vue异步加载about组件

本文实例为大家分享了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 vue.js表格分页,ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
vue.js 表格分页ajax 异步加载数据
Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f
-
详解Vue-Cli 异步加载数据的一些注意点
刚开始学vue的时候没有使用脚手架,现在用脚手架写法有点不同,今天遇到的问题是使用豆瓣api异步加载数据的时候,会一直在命令行上报错,基本上错误都是xxx 未定义. 例子 <template> <div v-if="moviesData"> <!-- 正在上映的电影-北京 --> <h1>{{ moviesData.title }}</h1> </div> </template> <script&
-
Vue异步加载about组件
本文实例为大家分享了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-li
-
解决vue动态路由异步加载import组件,加载不到module的问题
报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错 如: // 假如path = '@/views/user' const com = () => import(path) // 这样会报错哦 const com2 = (
-
vue异步加载高德地图的实现
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt
-
vue远程加载sfc组件思路详解
问题 在我们的 vue 项目中(特别是后台系统),总会出现一些需要多业务线共同开发同一个项目的场景,如果各业务团队向项目中提供一些公共业务组件,但是这些组件并不能和项目一起打包,因为项目中不能因为某个私有模块的频繁变更而重复构建发布. ^_^不建议在生产环境使用,代码包含eval 思路 在这种场景下我们需要将公共的业务组件部署到服务端,由客户端请求并渲染组件. 服务端解析.vue文件 使用vue-template-compiler 模板解析器,解析SFC(单文件组件) const compile
-
详解angularjs利用ui-route异步加载组件
ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等.随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor里面单独依赖的jquery就300多k.异步加载各个组件就很有必要.在这里我就以ui-route为框架来进行异步加载说明. 首先看一下路由加载文件 angular.module('webtrn-sns').config(['$stateProvider', function ($stateProvider) { $sta
-
手把手教您实现react异步加载高阶组件
本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/
-
vue自定义加载指令v-loading占位图指令v-showimg
目录 了解自定义指令的钩子函数 注册成为全局指令 需求描述 列表组件 ListCom.vue 加载动画组件 LoadingCom.vue 钩子函数 loading.js 分析上面的代码 main.js 中 注册成为全局指令 页面中使用加载动画指令 v-loading 占用图指令 v-showimg 占位图组件 ShowImgCom.vue 指令的书写 showimg.js main.js注册 指令的使用v-showimg指令 了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候
-
Vue动态加载异步组件的方法
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好
-
vue 组件异步加载方式(按需加载)
目录 组件异步加载(按需加载) 1.使用() => import() 2.使用resolve => require([’./_account’], resolve) 3. 使用Webpack 的内置语句:import(*) 4. require.ensure: 怎么实现组件异步加载 1.什么是异步组件 2.为什么需要异步加载组件 3.异步加载组件方法 组件异步加载(按需加载) 有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的. 如
-
vue 组件异步加载方式(按需加载)
目录 组件异步加载(按需加载) 1.使用() => import() 2.使用resolve => require([’./_account’], resolve) 3. 使用Webpack 的内置语句:import(*) 4. require.ensure: 怎么实现组件异步加载 1.什么是异步组件 2.为什么需要异步加载组件 3.异步加载组件方法 组件异步加载(按需加载) 有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的. 如
随机推荐
- Sql Server 2008数据库新建分配用户的详细步骤
- Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
- 分享10个程序员常用的的代码文本编辑器
- Spring集成MyBatis完整实例(分享)
- perl简单变量 整型 浮点数 字符串
- PHP 日,周,月点击排行统计
- Spring Boot实战之发送邮件示例代码
- JavaScript制作淘宝星级评分效果的思路
- 浅析使用BootStrap TreeView插件实现灵活配置快递模板
- JS判断数组中是否有重复值得三种实用方法
- python中字典dict常用操作方法实例总结
- AJAX实践DWR篇
- php页码形式分页函数支持静态化地址及ajax分页
- PowerShell小技巧之启动远程桌面连接
- Android中的常用尺寸单位(dp、sp)快速入门教程
- Win7、win2008中让IIS7支持asp的方法
- Java求1+2!+3!+...+20!的和的代码
- C#学习基础概念二十五问第1/4页
- 详解Tomcat Web 应用绑定域名的几种方式
- php把字符串指定字符分割成数组的方法
其他
- python自动填写问卷
- vue mounted 获取不到数据
- JS中清除字符串中的 重复数值
- js滑动时间控件实现原理
- C语音中怎样将一个红包总金额随机分成两个
- idea 刷新maven依赖报错
- 用 Pythontkinter 实现聊天机器人(
- tkmybatis更新详解
- vue3使用axios请求json数据
- jupyter markdown字体大小
- @select 注解分页查询
- feign 能重复定义GetMapping
- pycharm 控制台禁止sql结果集
- ftype 定义打开方式
- python如何关闭tab
- js find 所有数据
- xlwt 在原有excel添加sheet
- 安卓动态改变图片颜色
- Android Crash重启
- pgsql服务启动失败怎么查看