Comment utiliser le routeur pour transmettre des paramètres dans Vue.js-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-06-02 13:51:22

original

1420 Les gens l'ont consulté

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
  }
 ]
  })

Copier après la connexion

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
  }
 })
  }

Copier après la connexion

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

Copier après la connexion

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 // 获取

Copier après la connexion

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!