Comment utiliser le routage pour basculer entre les pages et transférer les paramètres dans un projet Vue ?

Comment utiliser le routage pour basculer entre les pages et transférer les paramètres dans un projet Vue ?

Dans le projet Vue, nous pouvons utiliser Vue Router pour basculer entre les pages et transmettre des paramètres. Vue Router est un plug-in officiellement recommandé pour implémenter des fonctions de routage. Il peut facilement implémenter le changement de page dans les applications d'une seule page et prend en charge la transmission de paramètres.

Tout d'abord, nous devons installer le plugin Vue Router dans le projet Vue. Il peut être installé via la commande npm :

npm install vue-router

Après l'installation, introduisez Vue Router dans le fichier d'entrée du projet (généralement main.js) et créez une instance de routage :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dans le code ci-dessus, nous introduisons VueRouter via le instruction d'importation et enregistrez le plugin dans l'instance Vue. Ensuite, nous avons défini les routes des objets de configuration de routage, qui contiennent deux chemins de routage et les composants correspondants. Lors de l'accès au chemin racine '/', le composant Home sera rendu ; lors de l'accès à '/about', le composant About sera rendu. Enfin, nous créons l'instance de routage en instanciant VueRouter et en transmettant l'objet de configuration de routage.

Après avoir créé l'instance de routage, nous pouvons utiliser b988a8fd72e5e0e42afffd18f951b277 et 975b587bf85a482ea10b0a28848e78a4 dans le composant Vue pour basculer entre les pages.

b988a8fd72e5e0e42afffd18f951b277 est un composant fourni par Vue Router, utilisé pour générer des liens. Il sera automatiquement rendu en une balise a. Cliquer sur le lien déclenchera un saut de routage. Nous pouvons utiliser b988a8fd72e5e0e42afffd18f951b277 dans le modèle du composant pour basculer entre les pages. Par exemple, dans le modèle du composant Home, nous pouvons utiliser b988a8fd72e5e0e42afffd18f951b277 comme ceci :

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

Dans le code ci-dessus, lorsque l'on clique sur le lien "Aller à À propos", il accède au chemin /about. .

975b587bf85a482ea10b0a28848e78a4 est un composant fourni par Vue Router, utilisé pour restituer les composants correspondant à l'itinéraire actuel. Nous pouvons utiliser 975b587bf85a482ea10b0a28848e78a4 dans le modèle du composant Vue pour afficher le composant correspondant à l'itinéraire actuel. Par exemple, dans le modèle du composant App, nous pouvons utiliser 975b587bf85a482ea10b0a28848e78a4 comme ceci :

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

De cette façon, lorsque l'on accède au chemin '/' ou '/about', le composant Home et le composant About seront rendus respectivement.

En plus de basculer entre les pages, Vue Router prend également en charge la transmission de paramètres. Lors de la définition d'un chemin de routage, vous pouvez spécifier des paramètres en utilisant des espaces réservés dans le chemin. Par exemple, nous pouvons définir un chemin de routage qui contient des paramètres :

{
  path: '/user/:id',
  name: 'user',
  component: User
}

Dans le code ci-dessus, nous définissons un chemin de routage de /user/:id, où :id est un paramètre. Lorsque nous accédons à /user/123, :id sera remplacé par la valeur réelle, par exemple, :id sera remplacé par 123.

Dans le composant Vue, nous pouvons obtenir les paramètres de routage via this.$route.params. Par exemple, dans le composant User, nous pouvons obtenir les paramètres de routage comme ceci :

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

Le code ci-dessus affichera les valeurs des paramètres de routage après le chargement du composant User.

En résumé, grâce au plug-in Vue Router, nous pouvons facilement basculer entre les pages et transférer les paramètres dans le projet Vue. Le changement de page est réalisé via b988a8fd72e5e0e42afffd18f951b277 et 975b587bf85a482ea10b0a28848e78a4, et les paramètres sont transmis en définissant le chemin de routage. L'utilisation de Vue Router peut améliorer la maintenabilité et l'évolutivité du projet, rendant le changement de page et le transfert de paramètres plus flexibles et plus pratiques.

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!