Vue-Router : Comment utiliser les paramètres de route dans l'application Vue ?

Vue-Router est un composant puissant de l'écosystème Vue.js pour gérer le routage dans les applications Vue. Dans une application Vue, l'utilisation des paramètres de route nous permet de transmettre facilement des données et de naviguer entre différentes pages. Dans cet article, nous apprendrons comment utiliser les paramètres de route dans une application Vue.js et donnerons des exemples de code correspondants.

Tout d'abord, nous devons installer Vue-Router. Exécutez la commande suivante dans le terminal pour installer Vue-Router :

npm install vue-router

Une fois l'installation terminée, nous devons introduire Vue-Router dans l'application Vue et l'utiliser pour définir des itinéraires. Par exemple, dans notre application, nous pouvons définir les deux routes suivantes :

// 导入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from './components/Home'
import User from './components/User'

// 使用VueRouter
Vue.use(VueRouter)

// 定义路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
})

Dans le code ci-dessus, nous utilisons VueRouter pour définir deux routes : / et /user/:id. Ces deux routes correspondent aux composants Accueil et Utilisateur de notre application. Parmi eux, / représente la route par défaut, qui est la route affichée lorsque l'on accède au répertoire racine de l'application. Et /user/:id représente une route dynamique, où :id représente l'ID de l'utilisateur, tel que /user/12345.

Lorsque nous utilisons des paramètres de routage dans notre application, nous pouvons obtenir les paramètres de routage via l'objet $route.params. Par exemple, dans notre composant Utilisateur, vous pouvez utiliser le code suivant pour obtenir l'ID de l'utilisateur :

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la syntaxe de modèle de Vue.js pour obtenir l'ID de l'utilisateur via $route.params.id, Afficher ainsi les informations utilisateur correspondantes.

En développement réel, nous pouvons utiliser $route.params pour obtenir les paramètres de routage et les transmettre au serveur backend pour les demandes de données. Par exemple, nous pouvons utiliser Axios pour demander les informations détaillées de l'utilisateur dans le composant User :

<template>
  <div>
    <h1>User ID: {{ user.id }}</h1>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.getUser(this.$route.params.id)
  },
  methods: {
    getUser(id) {
      axios.get(`/api/users/${id}`)
        .then(response => {
          this.user = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons Axios pour envoyer une requête GET au serveur backend afin d'obtenir les informations détaillées de l'utilisateur. Obtenez l'ID de l'utilisateur via $route.params.id et transmettez-le à la méthode getUser. Dans la méthode getUser, nous utilisons Axios pour demander au serveur backend et enregistrer les données renvoyées dans l'objet utilisateur. Enfin, nous utilisons l'objet utilisateur dans le modèle pour afficher les détails de l'utilisateur.

Résumé : en utilisant les paramètres d'itinéraire dans les applications Vue.js, la navigation dans les pages et la livraison des données peuvent être facilement réalisées. Nous n'avons besoin que d'utiliser Vue-Router pour définir des routes, d'utiliser $route.params pour obtenir les paramètres de route et de les transmettre aux composants ou aux serveurs back-end pour les demandes de données. Après avoir étudié cet article, je pense que vous maîtrisez les compétences nécessaires pour utiliser les paramètres de routage dans les applications Vue.js.

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!