Vue異步加載about組件
更新時間:2021年06月06日 13:10:26 作者:小_陳
這篇文章主要為大家詳細(xì)介紹了Vue異步加載about組件的相關(guān)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue異步加載about組件的具體代碼,供大家參考,具體內(nèi)容如下
異步加載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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 解決vue動態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實現(xiàn)
- vue+webpack實現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
- Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
- vue.js 表格分頁ajax 異步加載數(shù)據(jù)
- vue ElementUI實現(xiàn)異步加載樹
相關(guān)文章
vuejs項目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題
這篇文章主要介紹了vuejs項目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問題,需要的朋友可以參考下2018-04-04
Vue報錯:TypeError:Cannot create property '
這篇文章主要介紹了Vue報錯:TypeError:Cannot create property 'xxx' on string 'xxxx'問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3中關(guān)于路由規(guī)則的props配置方式
這篇文章主要介紹了Vue3中關(guān)于路由規(guī)則的props配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3 openlayers加載瓦片地圖并手動標(biāo)記坐標(biāo)點功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標(biāo)記坐標(biāo)點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04

