Comment utiliser le routeur pour transmettre des paramètres dans Vue.js

Cette fois, je vais vous montrer comment utiliser le routeur dans Vue.js pour transmettre des paramètres. Quelles sont les précautions lors de l'utilisation du routeur dans Vue.js pour transmettre des paramètres. , jetons un coup d'oeil.

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 Vue-router

Paramètre de passage

Code postal :

/ routeur /index.vue

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

Component Works transmet un identifiant de travail au composant Work

/components/Home/Comtent/Works.vue

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

/ composants/ Work/Index.vue

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

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

paramètre de requête

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

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

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

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 :

Comment utiliser Angular pour ouvrir Font-Awesome

Comment utiliser JS et TypeScript

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!