Comment utiliser Vue Router pour implémenter la correspondance dynamique et la surveillance des paramètres d'URL ?

Comment utiliser Vue Router pour implémenter la correspondance dynamique et la surveillance des paramètres d'URL ?

Vue Router est le plug-in officiel de gestion de routage de Vue.js. Il peut nous aider à implémenter la fonction de routage des applications monopage dans les applications Vue.js. Vue Router peut non seulement effectuer des sauts de routage de base, mais également faire correspondre et surveiller dynamiquement en fonction des paramètres d'URL. Cet article expliquera comment utiliser Vue Router pour implémenter la correspondance dynamique et la surveillance des paramètres d'URL, et fournira quelques exemples de code pour référence aux lecteurs.

Tout d'abord, nous devons installer et introduire le plugin Vue Router dans le projet Vue.js. Pour les méthodes d'installation spécifiques, veuillez vous référer à la documentation officielle de Vue Router. Une fois l'installation terminée, introduisez Vue Router dans le fichier principal du projet Vue (généralement main.js).

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Ensuite, nous pouvons créer un fichier router.js dans le répertoire racine du projet Vue et définir notre configuration de routage dans ce fichier. Dans la configuration du routage, nous pouvons utiliser deux points (:) pour définir les paramètres dynamiques. L'exemple de code est le suivant :

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans le code ci-dessus, nous définissons deux routes : l'une est le chemin racine "/", le composant correspondant est le composant Home ; l'autre est le chemin avec les paramètres dynamiques "/user/ : id", le composant correspondant est le composant User, et nous utilisons le paramètre id comme paramètre dynamique.

Ensuite, nous pouvons recevoir et utiliser ce paramètre dynamique dans le composant User. L'exemple de code est le suivant :

<template>
  <div>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      userId: ''
    }
  },
  created() {
    this.userId = this.$route.params.id
  },
  watch: {
    '$route.params.id'(newId) {
      this.userId = newId
    }
  }
}
</script>

Dans le code ci-dessus, nous obtenons la valeur du paramètre dynamique id via this.$route.params.id dans le hook de cycle de vie créé et l'attribuons à l'attribut userId. Dans le même temps, nous utilisons également watch pour surveiller les modifications des paramètres dynamiques. Lorsque l'identifiant du paramètre change, la valeur de userId est mise à jour.

Enfin, nous devons injecter la configuration du routeur dans l'instance Vue. Nous pouvons introduire router.js dans le fichier principal du projet Vue et transmettre la configuration du routeur lors de la création d'une instance Vue. L'exemple de code est le suivant :

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

Jusqu'à présent, nous avons implémenté la correspondance dynamique et la surveillance des paramètres d'URL via Vue Router. Lorsque nous accédons à "/user/1", le composant User affichera l'ID utilisateur : 1. Lorsque nous accédons à "/user/2", le composant User affichera l'ID utilisateur : 2. Nous pouvons effectuer le traitement logique correspondant dans le composant en fonction des modifications des paramètres dynamiques en fonction des besoins réels.

Pour résumer, cet article explique comment utiliser Vue Router pour implémenter la correspondance dynamique et la surveillance des paramètres d'URL. Nous pouvons définir des paramètres dynamiques en utilisant deux points (:) dans la configuration de la route et obtenir la valeur du paramètre via this.$route.params dans le composant. De plus, nous pouvons également utiliser watch pour surveiller les changements dans les paramètres dynamiques et effectuer le traitement logique correspondant en fonction des besoins réels. J'espère que le contenu de cet article sera utile aux lecteurs lorsqu'ils utiliseront Vue Router pour traiter les paramètres d'URL.

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!