Welche Methoden gibt es, um asynchrones Laden mit vue+webpack zu ermöglichen?

Dieses Mal werde ich Ihnen einige Methoden vorstellen, um das asynchrone Laden von Vue + Webpack zu ermöglichen, und welche Vorsichtsmaßnahmen zum Implementieren des asynchronen Ladens mit Vue + Webpack gelten. Das Folgende ist ein praktischer Fall sehen.

1. Das erste Beispiel

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

Hinweis: (Sie müssen das Suffix beim Importieren nicht angeben)

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

Das zweite Beispiel

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

3. Das dritte Beispiel ist auch ein empfehlenswertes Beispiel.

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

Lassen Sie mich Ihnen den Code von vue+webpack vorstellen, um das asynchrone Laden von Komponenten zu implementieren folgt:

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

Hinweis: Ignorieren Sie beim Laden asynchroner Komponenten nicht die .vue nach dem Komponentennamen. Dieses Beispiel sollte intuitiver sein. Nachdem Sie auf die Schaltfläche geklickt haben, wird der boolesche Wert der Variablen show in true geändert. Da es sich bei child.vue um eine asynchrone Komponente handelt, wird die Komponente zuerst über Ajax abgerufen und dann gerendert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man die internationale Entwicklung von vue-i18n und element-ui im ​​Vue-Projekt umsetzt

Sie müssen Details zur Verwendung von Vue-Komponenten beachten

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um asynchrones Laden mit vue+webpack zu ermöglichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!