Maison > Article > interface Web > Méthode d'implémentation de chargement asynchrone de composants dans Vue.js (code)
Le contenu de cet article concerne la méthode d'implémentation (code) du chargement asynchrone des composants dans Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Lorsqu'il y a de nombreux composants dans le projet, il y a de nombreux composants packagés par webpack Si les fichiers de tous les composants sont chargés lors de l'accès au composant correspondant à l'une des routes, ce sera un grand gaspillage en termes de. consommation de performances.
À l'heure actuelle, nous devons utiliser le chargement asynchrone des composants , c'est-à-dire que lorsque entre dans le composant correspondant, seuls les composants principaux, le code et le code du composant correspondant sont chargés.
Via vue-router et webpack
nécessite la prise en charge des plug-ins : babel-plugin-syntax-dynamic-import
import Vue from 'vue'import VueRouter from 'vue-router' // 这里不在提前引入所有需要的组件,而是在路由配置项的component中按需引入即可 // import login from ('../components/login/login.vue') // import homePagefrom ('../components/login/homePage.vue') const homePage= () => { import('../components/home/homePage.vue') } Vue.use(VueRouter)const route = [ { path: '/login', name: "登陆", // 当该路由被调用时,再去请求对应的组件内容 component: () => import('../components/login/login.vue') }, { path: '/homePage/:id', name: "首页", // 当该路由被调用时,再去请求对应的组件内容 component: () => import('../components/home/homePage.vue') } ]export default () => { return new VueRouter ({ route }) }
Recommandations associées :
Relativement simple Code pour le chargement asynchrone de fichiers JS_javascript skills
Comment implémenter le chargement asynchrone de composants dans vue+webpack ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!