Résumé des méthodes de chargement asynchrone de vue+webpack

Cette fois, je vais vous apporter un résumé de la méthode de chargement asynchrone de vue+webpack Quelles sont les précautions pour le chargement asynchrone de vue+webpack. 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);
  }
}

Je crois que vous maîtrisez le méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue router sépare toutes les sous-routes en composants indépendants

vue.js front-end et interaction avec les données back-end Explication détaillée des étapes

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!