So verwenden Sie vue+webpack, um asynchrones Laden durchzuführen

Dieses Mal zeige ich Ihnen, wie Sie mit vue+webpack asynchrones Laden durchführen und welche Vorsichtsmaßnahmen für die Verwendung von vue+webpack zum asynchronen Laden gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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:

Was sind die Vorsichtsmaßnahmen für die Verwendung von ES6?

Verwenden Sie Vue, um DIV-Ziehen durchzuführen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue+webpack, um asynchrones Laden durchzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!