Comment utiliser le routage pour implémenter le passage de messages entre les pages dans Vue ?

Comment utiliser le routage pour implémenter le passage de messages entre les pages dans Vue ?

Dans le développement de Vue, la messagerie entre différentes pages est une exigence courante. Le routage Vue fournit un moyen pratique d'implémenter le passage de messages entre les pages. Cet article expliquera comment utiliser le routage de Vue pour implémenter le passage de messages entre les pages et donnera des exemples de code détaillés.

1. Configurer le routage
Tout d'abord, nous devons configurer le routage. Dans le projet Vue, vous pouvez utiliser le plug-in vue-router pour la gestion du routage. Installez vue-router via npm, introduisez-le et utilisez-le dans main.js. Supposons que notre projet comporte deux pages, Accueil et À propos.

// main.js

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

Dans le code ci-dessus, nous avons défini deux règles de routage, correspondant aux deux composants Home et About. Ensuite, nous pouvons utiliser l'objet $route dans le composant pour obtenir des informations de routage et utiliser la méthode this.$router.push() pour accéder à la page.

2. Saut de page
Dans le composant Vue, vous pouvez accéder à la page via la méthode this.$router.push(). Nous pouvons transmettre le message qui doit être transmis en tant que paramètres de routage à la page cible.

// Home.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="gotoAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
    }
  },
  methods: {
    gotoAbout() {
      this.$router.push({
        path: '/about',
        query: {
          message: this.message,
        },
      })
    },
  },
}
</script>

Dans le code ci-dessus, nous définissons un message dans le composant Accueil et fournissons un bouton pour accéder à la page À propos. Grâce à la méthode this.$router.push(), nous transmettons le message à la page À propos en tant que paramètre de requête.

// About.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    this.message = this.$route.query.message
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
  },
}
</script>

Dans le composant À propos, nous utilisons this.$route.query.message pour récupérer le message transmis depuis la page d'accueil et l'afficher sur la page. En même temps, nous proposons également un bouton permettant de revenir à la page d'accueil après avoir cliqué dessus.

3. Résumé
Grâce à la fonction de routage de Vue, nous pouvons facilement implémenter la messagerie entre les pages. Lorsque la page saute, le message peut être transmis à la page cible en tant que paramètre de routage, et le message transmis peut être obtenu via l'objet this.$route dans la page cible.

Cet article utilise un exemple simple pour présenter comment utiliser le routage de Vue pour implémenter le passage de messages entre les pages. Dans le développement réel, nous pouvons utiliser des fonctions de routage plus avancées pour répondre à nos besoins en fonction de besoins spécifiques.

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!