Penggunaan dan langkah berjaga-jaga Vue2.0 Vue-Router

Vue-Router ialah perpustakaan pengurusan penghalaan yang disyorkan secara rasmi oleh Vue.js Ia telah dinaik taraf dan dioptimumkan sepenuhnya dalam versi Vue.js 2.0, menjadikannya lebih mudah digunakan dan lebih cekap. Vue-Router sangat mudah digunakan, tetapi terdapat beberapa isu yang perlu diberi perhatian semasa penggunaan. Artikel ini akan memperkenalkan penggunaan dan langkah berjaga-jaga Vue-Router untuk membantu pembangun menggunakan Vue-Router dengan lebih baik.

1. Penggunaan asas Vue-Router

Vue-Router ialah pemalam berdasarkan Vue.js, yang perlu dipasang dan diperkenalkan sebelum digunakan. Anda boleh menggunakan npm untuk memasang Vue-Router secara terus:

npm install vue-router

Selepas pemasangan selesai, perkenalkan Vue-Router ke dalam aplikasi Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use(VueRouter) akan mendaftarkan global contoh penghala.

Konfigurasikan penghala dalam contoh Vue:

import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

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

VueRouter pada asasnya ialah objek contoh Vue yang digunakan untuk mengurus penghalaan Vue. Dalam kod di atas, kami mencipta contoh VueRouter dan lulus dalam tatasusunan konfigurasi penghalaan (laluan) Tatasusunan konfigurasi penghalaan mengandungi komponen yang sepadan dengan laluan aplikasi yang berbeza.

Tambahkan pautan penghala dan paparan penghala dalam templat:

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

Dalam VueRouter, anda perlu menggunakan komponen pautan penghala semasa melompat laluan dan anda perlu menggunakan paparan penghala komponen untuk memaparkan komponen penghalaan semasa.

2. Penghalaan dinamik dan penghalaan bersarang

Vue-Router menyokong penghalaan dinamik dan penghalaan bersarang, yang boleh dikonfigurasikan mengikut keperluan yang berbeza.

1. Penghalaan dinamik

Penghalaan dinamik merujuk pada padanan penghalaan berdasarkan pembolehubah semasa penghalaan, contohnya:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

Dalam contoh ini, /:id mewakili parameter Padanan boleh padankan laluan yang berbeza seperti /user/1, /user/2, dsb., dan hantar parameter kepada komponen yang sepadan.

2. Penghalaan bersarang

Penghalaan bersarang merujuk kepada membenamkan laluan dalam laluan, contohnya:

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

Dalam contoh ini, gunakan pilihan kanak-kanak untuk menentukan Dalam bersarang struktur penghalaan, takrifan laluan kanak-kanak adalah serupa dengan takrifan laluan induk, tetapi laluan laluan anak perlu ditambah selepas laluan laluan induknya.

3. Fungsi cangkuk penghalaan

Vue-Router menyediakan beberapa fungsi cangkuk penghalaan yang boleh melakukan beberapa operasi semasa lompatan penghalaan.

1.beforeEach

Fungsi cangkuk dilaksanakan sebelum penghalaan lompatan, yang boleh digunakan untuk kawalan kebenaran dan pintasan lompatan, dsb.

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

2.afterEach

Fungsi cangkuk yang dilaksanakan selepas lompatan laluan boleh digunakan untuk operasi selepas lompatan laluan.

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

4. Nota

1. Anda perlu menggunakan komponen pautan penghala semasa penghalaan.

2. Jika anda perlu menghantar parameter semasa penghalaan, anda boleh menggunakan parameter penghalaan atau parameter pertanyaan Nama pembolehubah yang sepadan dengan parameter penghalaan perlu ditakrifkan menggunakan titik bertindih (:) dalam definisi penghalaan.

3. Apabila melompat, anda boleh menetapkan beberapa metadata dalam atribut meta objek laluan, yang boleh digunakan dalam fungsi cangkuk penghalaan.

4. Jika anda menggunakan mod sejarah HTML5, anda perlu mengkonfigurasi dan memadankan laluan di bahagian pelayan. Jika tidak dikonfigurasikan, halaman ralat 404 akan dikembalikan apabila memuat semula.

5. Ringkasan

Vue-Router ialah pemalam penting untuk Vue.js, yang boleh mengurus dan mengawal penghalaan aplikasi Vue.js dengan mudah. Artikel ini memperkenalkan penggunaan dan langkah berjaga-jaga asas Vue-Router Saya harap pembaca dapat menguasai penggunaan dan aplikasi Vue-Router dengan lebih baik.

Atas ialah kandungan terperinci Penggunaan dan langkah berjaga-jaga Vue2.0 Vue-Router. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!