So übergeben Sie Parameter im Router in Vue.js

Dieses Mal zeige ich Ihnen, wie Sie Parameter über den Router in Vue.js übergeben. Was sind die Vorsichtsmaßnahmen für den Router in Vue.js? Schauen Sie mal rein.

Vue-Router-Parameterübergabe

Warum sollten wir Parameter im Router übergeben?

Stellen Sie sich ein Szenario vor. Klicken Sie auf Klicken Sie auf einen bestimmten Artikel, um detaillierte Informationen zu dem Artikel anzuzeigen. Zu diesem Zeitpunkt müssen Sie dann die ID des Artikels an die Detailseite auf der Startseite übergeben, und die Detailseite kann die detaillierten Informationen über die ID abrufen.

Vue-Router-Parameterübergabemethode

Parma-Parameterübergabe

Postleitzahl:

/ Router /index.vue

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

Die Komponente Works übergibt eine Arbeits-ID an die Komponente Work

/components/Home/Comtent/Works.vue

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

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

laufender Screenshot:

Abfrageparameter

Ändern Sie einfach die obigen Parmas in Abfrage, das heißt:

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

Der Unterschied zwischen Parmas und Abfrage

Abfrage besteht darin, Parameter über die URL zu übergeben, die immer in der URL angezeigt wird

Parmas-Übertragungsparameter, nach dem Aktualisieren der Seite werden keine Daten angezeigt und die erhaltenen Parameter können nicht gespeichert werden.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Angular+Font-Awesome-Schritte

Detaillierte Erklärung der Klassenverwendung in js und Typoskript

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Parameter im Router in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!