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
}
]
})// 触发它传递一个对象到组件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>
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 // 获取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!
