Comment utiliser le routage pour partager des données entre pages dans Vue ?

Comment utiliser le routage pour partager des données entre les pages dans Vue ?

Dans le framework Vue, il est très courant d'utiliser le routage pour partager des données entre les pages. Grâce au routage, nous pouvons transférer des données entre différentes pages, permettant ainsi le partage des données entre les pages, améliorant ainsi l'efficacité du développement et l'expérience utilisateur.

Pour réaliser le partage de données entre les pages, nous devons d'abord installer Vue Router et l'introduire dans le projet. L'installation de Vue Router peut se faire avec la commande suivante :

npm install vue-router --save

Ensuite, introduisez Vue Router dans le fichier d'entrée du projet (généralement le fichier main.js) :

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

Vue.use(VueRouter)

Ensuite, nous devons configurer le routage dans l'instance Vue. Dans la configuration du routage, nous devons définir des règles de routage, c'est-à-dire les composants et les chemins correspondant à chaque itinéraire. Nous pouvons également définir certaines données globales partagées dans la configuration de routage afin qu'elles puissent être consultées et partagées dans différentes pages.

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

const router = new VueRouter({
  routes
})

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

Dans le code ci-dessus, nous avons défini deux routes : Home et About correspondant respectivement à deux composants. Dans l'instance Vue, nous définissons une donnée partagée sharedData, accessible et partagée dans différentes pages.

Ensuite, comment utiliser ces données partagées dans le composant ? Nous pouvons accéder et modifier ces données partagées via l'objet $route. L'objet de routage $route contient les informations de routage actuelles, y compris le chemin de routage, les paramètres, etc.

Dans le composant, nous pouvons accéder à l'objet $route via this.$route. Par exemple, dans le composant Home, nous pouvons accéder et modifier les données partagées des manières suivantes :

export default {
  mounted() {
    console.log(this.$route.sharedData) // 输出'Hello World'
  
    this.$route.sharedData = 'New Data'
    console.log(this.$route.sharedData) // 输出'New Data'
  }
}

Grâce au code ci-dessus, nous pouvons voir que l'accès et la modification des données partagées dans le composant Home sont très simples. Il suffit d'y accéder et de le modifier via this.$route.sharedData.

De même, les données partagées peuvent également être consultées et modifiées dans le composant À propos via this.$route.sharedData. De cette manière, les données peuvent être partagées et transférées entre différents composants.

Il est à noter que le partage d'objets $route n'est valable qu'au sein d'une même instance de routage. En d'autres termes, si nous accédons à $route.sharedData dans différentes instances de routage, le partage de données ne peut pas être réalisé.

Pour résumer, le partage de données entre les pages peut être facilement réalisé grâce au routage. En définissant des données partagées dans la configuration de routage, les composants peuvent réaliser le transfert et le partage de données en accédant et en modifiant l'objet $route. Cette méthode peut améliorer l'efficacité du développement et l'expérience utilisateur et constitue une technologie couramment utilisée dans le framework Vue.

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!