Quelles méthodes existe-t-il pour activer le chargement asynchrone avec vue+webpack ?

Cette fois, je vais vous apporter quelques méthodes pour activer le chargement asynchrone de vue+webpack, et quelles sont les précautions pour implémenter le chargement asynchrone avec vue+webpack. Voici des cas pratiques, jetons un oeil.

1. Le premier exemple

const Home = resolve => {
  import("@/components/home/home.vue").then( module => {
      resolve(module)
  }
}

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, // 添加该属性可以判断出该页面是否需要登录显示
  },
}]

2.

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

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' ,
    }
  ]
})

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>

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);
  }
}

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 :

Comment implémenter le développement international de vue-i18n et element-ui dans le projet vue

Vous devez prêter attention aux détails de l'utilisation des composants vue

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!