So übergeben Sie Router-Parameter in Vue.js

Dieses Mal zeige ich Ihnen, wie Sie Router-Parameter in Vue.js übergeben. Was sind die Vorsichtsmaßnahmen für die Übergabe von Router-Parametern in Vue.js?

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:

React Application Development Scaffolding Use Case

So bedienen Sie die Datenbindung von vue.js

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