Maison> interface Web> Voir.js> le corps du texte

Comment les règles de dénomination des routes dans Vue Router sont-elles définies ?

王林
Libérer: 2023-07-21 20:51:20
original
2166 Les gens l'ont consulté

Vue Router est le gestionnaire de routage officiellement fourni par Vue.js, qui fournit de puissantes fonctions de routage pour les applications monopage. Dans Vue Router, les routes sont définies via des tables de routage, et chaque route de la table de routage peut définir un nom unique, c'est-à-dire un nom de route. Cet article présentera les règles de dénomination de routage dans Vue Router et comment les utiliser.

Dans Vue Router, vous pouvez utiliser l'attributnamepour définir un nom unique pour chaque itinéraire. En attribuant un nom à un itinéraire, vous pouvez facilement référencer et accéder à l'itinéraire correspondant dans le code. Voici un exemple d'utilisation de la dénomination de route :name属性为每个路由定义一个唯一的名称。通过给路由设置名称,可以方便地在代码中引用和跳转到对应的路由。下面是一个使用了路由命名的示例:

import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' import About from '@/views/About.vue' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'home', // 设置路由名称为home component: Home }, { path: '/about', name: 'about', // 设置路由名称为about component: About } ] }) export default router
Copier après la connexion

在上面的代码中,我们分别为HomeAbout两个路由组件设置了路由名称。homeabout分别对应了//about这两个路径。

在代码中引用和跳转到对应的路由时,可以使用this.$router.push({ name: 'home' })来跳转到home这个路由,使用this.$router.push({ name: 'about' })来跳转到about这个路由。

除了在代码中跳转路由外,路由名称还可以在路由链接中使用。下面是一个使用了路由名称的链接示例:

Home About
Copier après la connexion

在上面的代码中,我们使用了组件来生成一个路由链接。通过设置to属性为{ name: 'home' }{ name: 'about' },就可以生成指向homeaboutrrreee

Dans le code ci-dessus, nous définissons les noms de route pour les deux composants de routage Homeet Aboutrespectivement. homeet aboutcorrespondent respectivement aux deux chemins /et /about.

Lorsque vous référencez et accédez à l'itinéraire correspondant dans le code, vous pouvez utiliser this.$router.push({ name: 'home' })pour accéder à homePour cette route, utilisez this.$router.push({ name: 'about' })pour accéder à la route about.

En plus de sauter des itinéraires dans le code, les noms d'itinéraire peuvent également être utilisés dans les liens d'itinéraire. Voici un exemple de lien utilisant un nom de route : rrreeeDans le code ci-dessus, nous utilisons le composant pour générer un lien de route. En définissant l'attribut tosur { name: 'home' }et { name: 'about' }, vous pouvez générer un lien vers home Liens vers les deux itinéraires et à propos. Pour résumer, les règles de dénomination des routes dans Vue Router sont implémentées en définissant un nom unique pour chaque route. En définissant un nom pour un itinéraire, nous pouvons facilement référencer et accéder à l'itinéraire correspondant dans le code, et nous pouvons également utiliser le nom de l'itinéraire pour la navigation dans les liens d'itinéraire. J'espère que cet article vous aidera à comprendre les règles de dénomination du routage dans Vue Router. Si vous souhaitez en savoir plus sur les fonctions et l'utilisation de Vue Router, vous pouvez consulter la documentation officielle et les ressources d'apprentissage associées. Je vous souhaite du succès dans le développement d'applications puissantes d'une seule page lorsque vous utilisez Vue Router !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn