Bagaimanakah penghuraian dan pemadanan navigasi berfungsi dalam Penghala Vue?

Vue Router ialah pemalam yang disediakan secara rasmi oleh Vue.js, yang digunakan untuk melaksanakan fungsi penghalaan bahagian hadapan. Ia boleh membantu kami membina aplikasi satu halaman (SPA) dengan cepat dan merealisasikan lompatan dan navigasi antara halaman. Dalam Penghala Vue, penghuraian dan pemadanan navigasi adalah pautan yang sangat penting Mari kita perkenalkan secara terperinci cara penghuraian dan pemadanan navigasi dilakukan dalam Penghala Vue.

Prinsip penghuraian dan pemadanan navigasi

Dalam Penghala Vue, penghuraian dan pemadanan navigasi terutamanya merangkumi dua langkah: Pertama, huraikan URL dalam bar alamat penyemak imbas dan ekstrak laluan, parameter dan maklumat lain ; konfigurasi penghalaan untuk menentukan komponen yang akan diberikan.

Dalam Penghala Vue, teras penghuraian dan pemadanan navigasi ialah kaedah VueRouter.prototype.match. Kaedah ini menerima objek laluan RAW (iaitu, objek yang digunakan untuk menerangkan laluan tertentu dalam aplikasi kami dan maklumat komponen yang akan diberikan), dan mengembalikan rekod laluan yang sepadan dengan URL semasa (iaitu, rekod laluan yang mengandungi peraturan padanan laluan , komponen, dsb. objek). Berikut ialah contoh mudah: VueRouter.prototype.match方法。这个方法接收一个RAW路由对象（即用于描绘我们应用程序中的特定路径以及要渲染的组件信息的对象），并返回与当前URL匹配的路由记录（即包含了路径匹配规则、组件等信息的对象）。下面是一个简单的示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

在上面的示例中，我们通过Vue.use(VueRouter)来安装插件，然后定义了一个名为routes的数组，数组中的每个对象表示一个路由配置，包含了路径path和对应的组件component。接着，我们创建了一个Vue Router实例，并将这些路由配置传给它。最后，我们将这个Vue Router实例作为router选项传给Vue实例进行挂载。

导航解析的过程

当我们在应用程序中进行导航时，Vue Router首先会对URL进行解析，获取其中的路径和参数等信息。这个解析的过程是自动触发的，我们只需要将Vue Router实例作为Vue实例的router选项进行挂载即可。

在解析URL的过程中，Vue Router会使用浏览器原生的API来获取URL。如果浏览器支持history.pushState API，则会使用window.location.pathname来获取URL路径；如果浏览器不支持history.pushState，则会使用window.location.hash来获取URL路径。

路由匹配的过程

在解析URL之后，Vue Router将会对解析到的路径进行路由匹配。路由匹配是通过VueRouter.prototype.match方法来实现的。

在路由匹配的过程中，Vue Router会遍历路由配置数组routes，针对其中的每个路由配置进行匹配。匹配的过程是根据路径进行的，Vue Router会根据定义的路径规则与解析到的URL路径进行匹配，如果匹配成功，则会返回该路由配置对应的组件。如果所有的路由配置都没有匹配成功，则会返回一个空的路由记录。

路由参数的匹配

在路由匹配的过程中，如果定义的路径规则中包含了参数，Vue Router会将解析到的路径中的参数值提取出来，作为组件的属性传递给对应的组件。

例如，如果我们定义了一个路径规则为/user/:id，则表示用户的详情页，其中的:id表示用户的ID，我们可以通过this.$route.params.idrrreee

Dalam contoh di atas, kami memasang pemalam melalui Vue.use(VueRouter), dan kemudian menentukan laluan bernama routes Array , setiap objek dalam tatasusunan mewakili konfigurasi penghalaan, termasuk laluan path dan komponen komponen yang sepadan. Seterusnya, kami mencipta contoh Penghala Vue dan menghantar konfigurasi penghalaan ini kepadanya. Akhir sekali, kami menghantar tika Vue Router ini sebagai pilihan router kepada tika Vue untuk pemasangan.

Proses penghuraian navigasi

Apabila kami menavigasi dalam aplikasi, Vue Router akan menghuraikan URL terlebih dahulu dan mendapatkan laluan, parameter dan maklumat lain. Proses penghuraian ini dicetuskan secara automatik Kami hanya perlu memasang tika Vue Router sebagai pilihan router bagi tika Vue.

Dalam proses menghuraikan URL, Vue Router akan menggunakan API asli pelayar untuk mendapatkan URL. Jika penyemak imbas menyokong API history.pushState, ia akan menggunakan window.location.pathname untuk mendapatkan laluan URL jika penyemak imbas tidak menyokong sejarah. pushState >, kemudian window.location.hash akan digunakan untuk mendapatkan laluan URL. 🎜🎜Proses padanan laluan🎜🎜Selepas menghuraikan URL, Vue Router akan melakukan padanan laluan pada laluan yang dihuraikan. Padanan laluan dilaksanakan melalui kaedah VueRouter.prototype.match. 🎜🎜Semasa proses pemadanan laluan, Vue Router akan merentasi tatasusunan konfigurasi laluan laluan dan memadankan setiap konfigurasi laluan di dalamnya. Proses pemadanan adalah berdasarkan laluan Vue Router akan memadankan laluan URL yang dihuraikan mengikut peraturan laluan yang ditentukan Jika padanan berjaya, komponen yang sepadan dengan konfigurasi penghalaan akan dikembalikan. Jika semua konfigurasi penghalaan tidak berjaya dipadankan, rekod penghalaan kosong akan dikembalikan. 🎜🎜Padanan parameter penghalaan🎜🎜Dalam proses padanan penghalaan, jika peraturan laluan yang ditentukan mengandungi parameter, Penghala Vue akan mengekstrak nilai parameter ​​​​dalam laluan yang dihuraikan dan menghantarnya kepada komponen yang sepadan sebagai atribut komponen . 🎜🎜Sebagai contoh, jika kami mentakrifkan peraturan laluan sebagai /user/:id, ia mewakili halaman butiran pengguna, dengan :id mewakili ID pengguna, kami boleh Dapatkan nilai ID ini melalui this.$route.params.id. 🎜🎜Ringkasan🎜🎜Penghuraian dan pemadanan navigasi dalam Penghala Vue dicapai dengan menghuraikan URL dan memadankannya dengan konfigurasi penghalaan. Semasa proses menghuraikan URL, Penghala Vue akan mendapatkan URL secara automatik dalam bar alamat penyemak imbas, dan kemudian memadankannya mengikut konfigurasi penghalaan yang ditentukan untuk menentukan komponen yang akan dipaparkan. Antaranya, padanan laluan dilakukan berdasarkan laluan Jika laluan mengandungi parameter, parameter akan dihantar ke komponen yang sepadan. 🎜🎜Fungsi penghuraian dan pemadanan navigasi Vue Router sangat berkuasa dan fleksibel, serta boleh memenuhi pelbagai keperluan penghalaan bahagian hadapan kami. Melalui penggunaan yang munasabah dan aplikasi yang fleksibel, kami boleh membina aplikasi satu halaman yang kompleks dan boleh diselenggara. 🎜

Atas ialah kandungan terperinci Bagaimanakah penghuraian dan pemadanan navigasi berfungsi dalam Penghala Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!