Heim >Web-Frontend >Front-End-Fragen und Antworten >So übergeben Sie Parameter beim Springen in VueJS
Vue-Methode zum Überspringen von Parametern: 1. Überspringen Sie Parameter über die Parameter oder das Abfrageattribut des Router-Link-Tags 2. Übergeben Sie „this.$router.push({name:‘Route naming‘,params:{ Parametername: Parameterwert..}})“-Anweisung, um zur Parameterübergabe zu springen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Erstellen Sie zunächst readDetail.vue und registrieren Sie die Route in index.js.
Seitenübermittlungsmethode:
<router-link> <button>跳转</button> </router-link> 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. params -> 是要传送的参数,参数可以直接key:value形式传递 3. query -> 是通过 url 来传递参数的同样是key:value形式传递
this.$router.push({name:'Route naming',params:{parameter name :parameter value ,Parametername:Parameterwert}})
this.$router.push({ path: 'yourPath', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找', params: { key: 'key', msgKey: this.msg } /*query: { key: 'key', msgKey: this.msg }*/ })
this.$route.params.Parametername
this.$route.query.Parametername
Experiment (beinhaltet zwei Möglichkeiten) :
Sendeseite:
<router-link> <button>跳转</button> </router-link> <button>传递</button> ----------------------------------------------------------------------------------------- export default { name: 'reads', data () { return { msg: 'msg test.' } },
Empfangsseite:
<p> </p><p>Num:{{ myIndex }}</p> <p>{{ msg }}</p> ----------------------------------------------------------- data () { return { msg: '', // 保存传递过来的index myIndex: '' } ----------------------------------------------------------- mounted: function () { this.msg = this.$route.params.msgKeyOne this.myIndex = this.$route.params.msgKey console.log(this.myIndex) }
Experimentelle Ergebnisse:
Verwandte Empfehlungen: „vue.js Tutorial“
Das obige ist der detaillierte Inhalt vonSo übergeben Sie Parameter beim Springen in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!