Vue et Vue-Router : Comment utiliser les informations de routage dans les composants ?

Vue et Vue-Router : Comment utiliser les informations de routage dans les composants ?

Introduction :
Pendant le processus de développement de Vue.js, il est souvent nécessaire d'obtenir et d'utiliser des informations de routage dans les composants, comme l'obtention des paramètres d'URL actuels, le saut entre différentes pages, etc. Vue.js fournit le plug-in Vue-Router pour implémenter les fonctions de routage front-end. Cet article explique comment utiliser Vue-Router dans les composants pour obtenir et utiliser les informations de routage.

Introduction à Vue-Router :
Vue-Router est un plug-in de gestion de routage officiellement fourni par Vue.js. Il peut réaliser la fonction de routage frontal et permettre aux applications monopage d'avoir la même adresse URL et le même changement de page. caractéristiques des applications multipages traditionnelles. Vue-Router utilise des composants tels que router-view et router-link pour restituer le contenu de la page et gérer les sauts de page.

Dans Vue-Router, les informations de routage sont stockées dans l'objet $router. Vous pouvez obtenir les informations de routage actuelles via l'objet $router, y compris le chemin de routage actuel, les paramètres, les requêtes, etc.

Étapes pour utiliser les informations de routage dans les composants :

1. Importer Vue et Vue-Router :
   Tout d'abord, vous devez vous assurer que Vue et Vue-Router sont installés et importer les packages Vue et Vue-Router.

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

2. Configurer le routage :
   Dans Vue-Router, vous devez définir la table de routage, y compris les composants et les chemins correspondant à chaque itinéraire. Les tables de routage peuvent être définies sous forme de tableaux ou d'objets.

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

const router = new VueRouter({
  routes
});

Dans le code ci-dessus, deux routes sont définies : '/' correspond au composant Home, et '/about' correspond au composant About.

3. Utilisez l'objet $router dans le composant Vue :
   Dans le composant Vue, vous pouvez accéder à l'objet $router via this.$router pour obtenir et utiliser les informations de routage.

Par exemple, vous pouvez obtenir le chemin de routage actuel via this.$router.path, obtenir les paramètres de routage actuels via this.$router.params,
obtenir les paramètres de requête de routage actuels via this.$router.query.

export default {
  mounted() {
    console.log('当前路由路径：', this.$router.path);
    console.log('当前路由参数：', this.$route.params);
    console.log('当前路由查询参数：', this.$route.query);
  }
}

Dans le code ci-dessus, la fonction de hook montée est utilisée pour afficher le chemin de routage actuel, les paramètres et les paramètres de requête après le chargement du composant.

4. Utilisez le lien de routeur dans le modèle pour accéder à la page :
   Vue-Router fournit le composant de lien de routeur, vous pouvez utiliser le lien dans le modèle pour accéder à la page.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Dans le code ci-dessus, le chemin de saut est spécifié via l'attribut to. En cliquant sur les liens Accueil et À propos, vous pouvez accéder à la page correspondante.

Résumé :
Avec Vue-Router, utiliser les informations de routage dans les composants Vue est très simple. Tout d'abord, importez Vue et Vue-Router, configurez la table de routage, puis obtenez les informations de routage via cet objet .$router et utilisez le composant router-link dans le modèle pour implémenter le saut de page. Grâce à ces étapes, nous pouvons utiliser plus facilement les informations de routage dans le projet Vue.js pour implémenter des fonctions telles que le transfert de données et le changement de page entre différentes pages.

J'espère que cet article vous aidera à comprendre comment utiliser Vue-Router pour obtenir et utiliser les informations de routage dans les composants.

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!