Comment utiliser vue+webpack pour effectuer un chargement asynchrone

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

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 :

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!