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

Cette fois, je vais vous montrer comment transmettre des paramètres par le routeur dans Vue.js. Quelles sont les précautions pour que le routeur dans Vue.js transmette des paramètres. Ce qui suit est un cas pratique, voyons. jetez un 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 :

Explication détaillée des étapes Angular+Font-Awesome

Explication détaillée de l'utilisation des classes dans js et dactylographié

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!