So verwenden Sie einen Router zum Übergeben von Parametern in Vue.js

Dieses Mal zeige ich Ihnen, wie Sie den Router in Vue.js zum Übergeben von Parametern verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie den Router in Vue.js zum Übergeben von Parametern verwenden? , lass uns einen Blick darauf werfen.

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:

So verwenden Sie Angular, um Font-Awesome zu öffnen

So verwenden Sie JS und TypeScript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie einen Router zum Übergeben von Parametern in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!