Comment accéder à la même page et changer de paramètre dans vue

Vue.js est un framework JavaScript pour créer des interfaces utilisateur. Il adopte le modèle MVVM et lie le DOM et les données de manière basée sur les données. Dans le processus de développement d’applications, le routage frontal est un élément très important. Vue.js fournit le plug-in vue-router, qui peut être utilisé pour implémenter des fonctions de routage front-end.

Dans les affaires réelles, nous rencontrons souvent des scénarios dans lesquels nous devons accéder à la même page et changer de paramètres. Par exemple, lorsque les utilisateurs parcourent la page de détails du produit, ils doivent passer à différents produits sur la même page. À l'heure actuelle, nous pouvons utiliser les fonctions « correspondance de routage dynamique » et « chargement paresseux » de vue-router pour y parvenir.

1. Correspondance d'itinéraire dynamique

Le système de routage de Vue.js nous permet de définir des URL avec des paramètres et d'injecter les paramètres dans le composant lorsque le routage est mis en correspondance.

Tout d'abord, définissez la route dynamique dans router.js :

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

Dans le code ci-dessus, nous définissons une route nommée "Goods" et le chemin est "/goods/:id". Parmi eux, ":id" signifie qu'il s'agit d'un paramètre dynamique et que l'utilisateur peut transmettre n'importe quelle valeur de paramètre lors de l'accès.

Ensuite, récupérez les paramètres de routage via $route dans le composant Goods.vue :

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Dans le code ci-dessus, nous obtenons les paramètres de routage via $route.params, puis modifions la valeur actuelle du paramètre lors du changement de produit. Ajoutez 1, et passez à l'itinéraire nommé "Goods" via la méthode $router.push et transmettez les paramètres. Cela permet de basculer entre différents produits sur la même page.

2. Chargement paresseux

Le chargement paresseux peut être compris comme un chargement retardé, ce qui signifie charger le code correspondant uniquement en cas de besoin. L’utilisation du chargement paresseux peut améliorer la vitesse de chargement des pages et les performances globales.

Dans Vue.js, vous pouvez utiliser la fonction import() pour implémenter le chargement paresseux. Modifiez la référence au composant dans router.js pour utiliser le chargement paresseux :

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

L'import('@/views/Goods.vue') ici consiste à introduire le composant Goods.vue via un chargement paresseux. Lorsque l'utilisateur accède à cet itinéraire, le code correspondant sera chargé.

3. Code complet

Enfin, jetons un coup d'œil au code complet :

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la technologie de correspondance d'itinéraire dynamique et de chargement paresseux, Implémentation de la fonction de basculement entre différents produits sur la même page. Il s'agit d'un scénario d'application du système de routage dans Vue.js. Pour les étudiants qui viennent de commencer à apprendre Vue.js, cela vaut vraiment la peine d'être appris et maîtrisé.

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!