Comment fonctionnent l'analyse et la correspondance de navigation dans Vue Router ?

Vue Router est un plug-in officiellement fourni par Vue.js, qui est utilisé pour implémenter des fonctions de routage front-end. Cela peut nous aider à créer rapidement une application monopage (SPA) et à réaliser des sauts et une navigation entre les pages. Dans Vue Router, l'analyse et la correspondance de navigation sont des liens très importants. Présentons en détail comment l'analyse et la correspondance de navigation sont effectuées dans Vue Router.

Principe d'analyse et de correspondance de navigation

Dans Vue Router, l'analyse et la correspondance de navigation comprennent principalement deux étapes : Premièrement, analyser l'URL dans la barre d'adresse du navigateur et extraire le chemin, les paramètres et d'autres informations. Ensuite, en fonction des informations extraites ; , faites-le correspondre à la configuration de routage pour déterminer le composant à restituer.

Dans Vue Router, le cœur de l'analyse et de la correspondance de navigation est la méthode VueRouter.prototype.match. Cette méthode reçoit un objet de route RAW (c'est-à-dire un objet utilisé pour décrire un chemin spécifique dans notre application et des informations sur les composants à restituer) et renvoie un enregistrement de route qui correspond à l'URL actuelle (c'est-à-dire un enregistrement de route qui contient des règles de correspondance de chemin). , composants, etc. objet). Voici un exemple simple : 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

Dans l'exemple ci-dessus, nous installons le plug-in via Vue.use(VueRouter), puis définissons une route nommée routes Array , chaque objet du tableau représente une configuration de routage, comprenant le chemin path et le composant correspondant component. Ensuite, nous créons une instance de Vue Router et lui transmettons ces configurations de routage. Enfin, nous transmettons cette instance de Vue Router en tant qu'option router à l'instance de Vue pour le montage.

Le processus d'analyse de la navigation

Lorsque nous naviguons dans l'application, Vue Router analysera d'abord l'URL et obtiendra le chemin, les paramètres et d'autres informations. Ce processus d'analyse est automatiquement déclenché. Il suffit de monter l'instance de Vue Router en tant qu'option router de l'instance de Vue.

Dans le processus d'analyse de l'URL, Vue Router utilisera l'API native du navigateur pour obtenir l'URL. Si le navigateur prend en charge l'API history.pushState, il utilisera window.location.pathname pour obtenir le chemin de l'URL si le navigateur ne prend pas en charge history.pushState ; >, alors window.location.hash sera utilisé pour obtenir le chemin de l'URL. 🎜🎜Le processus de correspondance d'itinéraire🎜🎜Après avoir analysé l'URL, Vue Router effectuera la correspondance d'itinéraire sur le chemin analysé. La correspondance d'itinéraire est implémentée via la méthode VueRouter.prototype.match. 🎜🎜Pendant le processus de correspondance d'itinéraire, Vue Router parcourra le tableau de configuration d'itinéraire routes et fera correspondre chaque configuration d'itinéraire qu'il contient. Le processus de correspondance est basé sur le chemin. Vue Router fera correspondre le chemin de l'URL analysé selon les règles de chemin définies. Si la correspondance réussit, le composant correspondant à la configuration de routage sera renvoyé. Si toutes les configurations de routage ne correspondent pas correctement, un enregistrement de routage vide sera renvoyé. 🎜🎜Correspondance des paramètres de routage🎜🎜Dans le processus de correspondance de routage, si les règles de chemin définies contiennent des paramètres, Vue Router extraira les valeurs des paramètres du chemin analysé et les transmettra au composant correspondant en tant que propriétés du composant. 🎜🎜Par exemple, si nous définissons une règle de chemin comme /user/:id, elle représente la page de détails de l'utilisateur, où :id représente l'ID de l'utilisateur, nous pouvons obtenir cette valeur d'ID via this.$route.params.id. 🎜🎜Résumé🎜🎜L'analyse et la correspondance de la navigation dans Vue Router sont obtenues en analysant l'URL et en la faisant correspondre à la configuration de routage. Pendant le processus d'analyse de l'URL, Vue Router obtiendra automatiquement l'URL dans la barre d'adresse du navigateur, puis la fera correspondre en fonction de la configuration de routage définie pour déterminer le composant à restituer. Parmi eux, la correspondance de chemin est effectuée en fonction du chemin. Si le chemin contient des paramètres, les paramètres seront transmis au composant correspondant. 🎜🎜Les fonctions d'analyse et de correspondance de navigation de Vue Router sont très puissantes et flexibles, et peuvent répondre à nos différents besoins de routage frontal. Grâce à une utilisation raisonnable et à une application flexible, nous pouvons créer des applications complexes et maintenables d’une seule page. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!