So implementieren Sie das verzögerte Laden des Vue-Routings

In diesem Artikel wird hauptsächlich die Implementierungsmethode des verzögerten Ladens des Vue-Routings vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Dieser Artikel stellt das verzögerte Laden von Routen in Vue vor und teilt es mit allen. Die Details sind wie folgt:

Wir können die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke unterteilen , und dann, wenn die Route ist Die entsprechende Komponente wird nur geladen, wenn darauf zugegriffen wird.

1. Komponente kann eine Pfeilfunktion sein, wir können dynamische Importsyntax verwenden, um Code-Chunking-Punkte zu definieren

2. Wenn Sie es sehen möchten das Netzwerk Zum Namen der dynamisch geladenen Komponente können Sie webpackChunkName hinzufügen;

3. Gleichzeitig chunkFileName

Code

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件，component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

Beachten Sie, dass @ oben das aktuelle src-Verzeichnis darstellt. Weitere Informationen finden Sie in der Konfiguration von webpack

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

Analyse

Erstellte zwei Komponenten, Home und Todos, mithilfe von Routing Lazy Loading After Bei der Konfiguration haben wir npm run dev ausgeführt, das Netzwerk geöffnet und aktualisiert. Wir werden feststellen, dass der Name mit dem oben definierten webpackChunkName übereinstimmt wird todo.js laden. Dies ist eine einfache Anwendung des verzögerten Ladens von Routen.

Andere

Im Eintrag des Projekts in main.js können wir die Vorlagensyntax oder die Renderfunktion

verwenden

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ein einfaches Beispiel für den lokalen Vorschaueffekt hochgeladener Bilder, der von jQuery implementiert wird

Einige häufige Probleme in JavaScript-Interviews Falsche Punkte aussortiert

vue axios request interception example code

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden des Vue-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!