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-🎜>

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

Code postal :

/ routeur /index.vue

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

/components/Home/Comtent/Works.vue

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

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

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 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 :

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!