Bagaimana untuk menggunakan Vue-Router untuk melaksanakan pemuatan malas laluan dalam aplikasi Vue?

Dalam aplikasi Vue, menggunakan Vue-Router untuk melaksanakan pemuatan malas laluan boleh meningkatkan prestasi aplikasi. Menggunakan penghalaan pemuatan malas, sesetengah kod dan komponen boleh dimuatkan hanya apabila ia diperlukan, mengelakkan memuatkan semuanya pada permulaan aplikasi, sekali gus mengurangkan masa pemuatan aplikasi dan meningkatkan pengalaman pengguna.

Vue-Router ialah pengurus penghalaan rasmi Vue.js, yang boleh melaksanakan fungsi penghalaan aplikasi. Untuk menggunakan Vue-Router dalam Vue untuk melaksanakan pemuatan malas laluan, anda perlu menggunakan fungsi pemisahan kod dalam Webpack. Artikel ini akan memperkenalkan cara menggunakan Vue-Router untuk melaksanakan pemuatan malas laluan dalam aplikasi Vue dan memberikan contoh kod khusus.

Langkah 1: Pasang Vue-Router

Untuk menggunakan Vue-Router untuk melaksanakan pemuatan malas laluan, anda mesti memasang Vue-Router terlebih dahulu. Gunakan npm untuk memasang Vue-Router:

npm install vue-router --save

Langkah 2: Buat contoh Vue

Dalam pilihan penghala contoh Vue, gunakan routing lazy loading:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

new Vue({
  router
}).$mount('#app')

Dalam kod di atas, fungsi import() digunakan untuk import komponen Foo dan Bar , dan tetapkan ia kepada pembolehubah menggunakan const. Fungsi import() di sini ialah kaedah import dinamik yang disediakan oleh Webpack, yang boleh membuat blok berasingan untuk setiap komponen. Dalam pilihan penghala bagi contoh Vue, hanya gunakan komponen yang diimport secara langsung.

Langkah 3: Menghalakan konfigurasi pilihan pemuatan malas

Selain menggunakan konfigurasi Webpack lalai untuk pemisahan kod, Vue-Router juga menyediakan beberapa konfigurasi pilihan yang boleh membantu pembangun mengawal pemisahan kod dengan lebih terperinci dan meningkatkan kecekapan pemuatan malas. .

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})

• webpackChunkName: Tentukan nama untuk komponen dan Webpack akan membuat ketulan untuk setiap ketul berdasarkan nama. Jika dua komponen menggunakan nama yang sama, ia boleh diletakkan dalam blok yang sama, seterusnya mengurangkan masa memuatkan malas.
• mod: Gunakan mod sejarah HTML5, sokongan pelayan diperlukan.
• sandaran: Apabila penyemak imbas tidak menyokong mod sejarah HTML5, pilihan ini menentukan sama ada ia harus kembali kepada mod cincang.
• Gelagat tatal: digunakan untuk tingkah laku menatal semasa melompat ke halaman.
• base: URL asas Contohnya, apabila menggunakan vue-router, jika kami merancang untuk menggunakan aplikasi dalam subdirektori, kemudian gunakan pilihan asas untuk menentukan direktori.
• linkActiveClass: Menentukan nama kelas CSS bagi pautan aktif.
• linkExactActiveClass: Tentukan nama kelas CSS yang betul-betul sepadan dengan pautan pengaktifan.
• beforeEach: Pengawal penghalaan global, yang boleh didaftarkan sebelum cangkuk menukar penghalaan.
• afterEach: Pengawal penghalaan global, yang boleh didaftarkan selepas cangkuk menukar penghalaan.

Ringkasan

Menggunakan Vue-Router dalam aplikasi Vue untuk melaksanakan pemuatan malas laluan boleh meningkatkan prestasi aplikasi dengan banyak. Kita boleh menggunakan fungsi pemisahan kod dalam Webpack untuk mencapai pemuatan malas. Gunakan fungsi import() Vue-Router untuk mengimport komponen, tetapkan ia kepada pembolehubah menggunakan const, dan kemudian gunakan komponen yang diimport dalam pilihan penghalaan. Pada masa yang sama, Vue-Router juga menyediakan beberapa konfigurasi pilihan, yang boleh membantu pembangun mengawal pemisahan kod dengan lebih terperinci dan meningkatkan kecekapan pemuatan malas.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue-Router untuk melaksanakan pemuatan malas laluan dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!