Comment transmettre les paramètres du routeur dans Vue.js

Cette fois, je vais vous montrer comment transmettre les paramètres du routeur dans Vue.js, et quelles sont les précautions à prendre pour transmettre les paramètres du routeur dans Vue.js. Ce qui suit est un cas pratique, jetons un coup d'œil.

Passer les paramètres du routeur Vue-🎜>

Pourquoi devrions-nous transmettre les paramètres du routeur

Imaginez un scénario Actuellement sur la page d'accueil, vous devez cliquer sur. un certain élément pour afficher des informations détaillées sur l'élément. Ensuite, à ce moment-là, vous devez transmettre l'identifiant de l'élément à la page de détails sur la page d'accueil, et la page de détails peut obtenir les informations détaillées via l'identifiant.

Méthode de passage des paramètres du routeur Vue-🎜>

Paramètre de passage de Parme

Code postal :

/ routeur /index.vue

Component Works transmet un identifiant de travail au composant Work

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/work',
   name: 'Work',
   component: Work
  }
 ]
  })

/components/Home/Comtent/Works.vue

/ composants/ Work/Index.vue

// 触发它传递一个对象到组件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

Capture d'écran en cours d'exécution :

<template>
  <p class="work">
   work: {{id}}
  </p>
 </template>
 
 <script>
 export default {
  name: 'Work',
  data () {
   return {
    id: this.$route.params.id //拿到id
   }
  }
 }
 </script>

paramètre de requête

Changez simplement les parmes ci-dessus en requête, c'est-à-dire :

La différence entre les parmes et la requête

// 传入
 this.$router.push({
path: '/work',
name: 'Work',
query: {
 id: id
}
 })
 
 ... ...
 
 this.$route.query.id // 获取

La requête consiste à transmettre les paramètres via l'URL, qui est toujours affichée in

parmas est utilisé pour transmettre des paramètres dans l'URL. Après avoir actualisé la page, il n'y a aucune donnée et les paramètres obtenus ne peuvent pas être enregistrés

Je pense que vous maîtrisez la méthode après avoir lu le. cas dans cet article. Veuillez prêter attention aux choses plus intéressantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Cas d'utilisation de l'échafaudage de développement d'applications React

Comment utiliser la liaison de données 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!