运用时才装入须要的组件,能够有用的进步初次装入页面的速率。比如在路由切换时
异步组件的完成
Vue.js许可将组件定义为一个工场函数,动态地剖析组件的定义。工场函数吸收一个resolve回调,胜利猎取组件定义时挪用。也能够挪用reject(reason)指导失利。
假定我们有两个组件Home、About。Home组件和首页同步加载,而About组件则按需加载。案例的代码有首页index.html,组件代码about.js组成。
起首是about.js代码:
Vue.component('about', {
template: '<div>About page</div>'
});
接下来是index.html代码:
<html>
<head>
<title>Async Component test</title>
</head>
<body>
<div id="app">
<router-link to="/home">/home</router-link>
<router-link to="/about">/about</router-link>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/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();
}
};
script.onerror = 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', 'about.js').then(resolve, reject);
}
}
]
});
var app = new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>
为了加载在服务器的js文件,我们须要一个HTTP服务器。能够运用node.js的http-server完成。装置并启动一个服务器的要领:
npm install http-server -g
http-server
接见:
http://127.0.0.1:8080
我们即可在首页看到home和about的链接,点击home能够显现home组件,点击about,假如还没有加载过,就加载about组件。
对index.html内的代码稍作诠释:
组件定义为
function(resolve, reject) {}
函数,其内挪用load函数,胜利后resolve,不然reject函数load内经由过程建立标签
script
加载指定文件,并经由过程onload事宜当加载完成后,经由过程Vue.component
考证组件,存在就resolve,不然reject
异步组件的webpack计划
假如运用webpack脚手架的体式格局,加载异步组件将会越发直观。本节会用一样的案例,运用webpack做一次演示。
起首建立脚手架,并装置依靠
vue init webpack vuetest
cd vuetest
npm i
npm run dev
接见localhost:8080,能够看到Vue的默许页面。然后替代main.js文件为:
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import About from './components/about'
Vue.use(VueRouter)
const Home = { template: '<div>home page</div>' }
// const About = { template: '<div>about page</div>' }
const router = new VueRouter({
routes :[
{ path: '/home', component: Home },
{ path: '/about', component: function (resolve) {
require(['./components/about'], resolve)
}
},
{ path: '/', redirect: '/home' }
]
})
new Vue({
el: '#app',
template: '<App/>',
router: router,
components: { App }
})
并增加组件about到src/components/about.vue
:
<template>
<div>about page</div>
</template>
再次接见localhost:8080,能够看到Home组件和about组件的链接,点击链接尝尝,能够看到组件home和about都是能够加载的。
这里特别要诠释的是代码:
component: function (resolve) {
require(['./components/about'], resolve)
}
}
Vue.js支撑component定义为一个函数:function (resolve) {}
,在函数内,能够运用相似node.js的库引入形式
require([‘./components/about’], resolve)
从而大大的简化了异步组件的开辟。固然,价值是你须要运用脚手架代码。这个特别的require语法通知webpack自动将编译后的代码分割成差别的块,这些块将经由过程按需自动下载。
关于
作者:刘传君
建立过产物,创过业。好念书,求甚解。
能够经由过程 1000copy#gmail.com 联络到我
出品
bootstrap小书 https://www.gitbook.com/book/…
http小书 http://www.ituring.com.cn/boo…
Git小书 http://www.ituring.com.cn/boo…