Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-06-02 10:45:47
Original
1949 Leute haben es durchsucht

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)
  }
}
Nach dem Login kopieren

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

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

Das zweite Beispiel

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

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' ,
    }
  ]
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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);
  }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
web
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!