Maison > interface Web > js tutoriel > Comment utiliser vue+webpack pour effectuer un chargement asynchrone

Comment utiliser vue+webpack pour effectuer un chargement asynchrone

php中世界最好的语言
Libérer: 2018-06-06 11:27:43
original
1435 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser vue+webpack pour effectuer un chargement asynchrone, et quelles sont les précautions à prendre pour utiliser vue+webpack pour effectuer un chargement asynchrone. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Le premier exemple

const Home = resolve => {
  import("@/components/home/home.vue").then( module => {
      resolve(module)
  }
}
Copier après la connexion

Remarque : (Vous n'avez pas besoin d'écrire le suffixe lors de l'importation ci-dessus)

export default [{
  path: '/home',
  name:'home',
  component: Home,
  meta: {
    requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示
  },
}]
Copier après la connexion

2.

const router = new Router({
  routes: [
    {
       path: '/home',
       component: (resolve)=> {
         require(['../components/home/home'], resolve) // 省去了在上面去import引入
       }
     }
  ]
})
Copier après la connexion

3. Le troisième exemple, c'est également un exemple recommandé

// r就是resolve// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 
const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home');
const router = new Router({
  routes: [
    {
     path: '/home/home',
     component: Home,
     name: 'home' ,
    }
  ]
})
Copier après la connexion

Ce qui suit vous présentera le code de vue+webpack à implémenter Chargement de composants asynchrones. Le code spécifique est le suivant Montré :

HTML

<input type="button" @click="showchild" value="show"> //点击按钮后,show为真,先获取child组件,再渲染p内容 
<p id="contain" v-if="show">
  <child></child>
</p>
Copier après la connexion

JS

data () {
  return {
    msg: 'Welcome to Your Vue.js App',
    show:false
  }
},
methods: {
  showchild:function(){
    this.show=true;
  }
},
components: {
  'child': function(resolve) {
    require(['./components/child.vue'], resolve);
  }
}
Copier après la connexion

Remarque : lors du chargement de composants asynchrones. , n'utilisez pas .vue après le nom du composant négligé. Cet exemple devrait être plus intuitif. Après avoir cliqué sur le bouton, la valeur booléenne de la variable show est remplacée par true. Puisque child.vue est un composant asynchrone, le composant sera d'abord obtenu via ajax puis rendu.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les précautions à prendre pour utiliser ES6

Utiliser Vue pour faire glisser des DIV

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal