Wie springe ich zur Seite in vue.js?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9. Diese Methode ist für alle Computermarken geeignet.

Vue-Methode zum Springen zur Seite

1: Router-Link-Sprung

<!-- 直接跳转 -->
<router-link to=&#39;/testDemo&#39;>
 <button>点击跳转2</button>
</router-link>
 
<!-- 带参数跳转 -->
<router-link :to="{path:&#39;testDemo&#39;,query:{setid:123456}}">
 <button>点击跳转1</button>
</router-link>
 
<router-link :to="{name:&#39;testDemo&#39;,params:{setid:1111222}}">
 <button>点击跳转3</button>
</router-link>

2: this.$router.push()

<template>
 <p id=&#39;test&#39;>
 <button @click=&#39;goTo()&#39;>点击跳转4</button>
 </p>
</template>
<script>
 export default{
 name:&#39;test&#39;,
 methods:{
 goTo(){
 //直接跳转
 this.$router.push(&#39;/testDemo&#39;);
 
 //带参数跳转
 this.$router.push({path:&#39;/testDemo&#39;,query:{setid:123456}});
 this.$router.push({name:&#39;testDemo&#39;,params:{setid:111222}});
 }
 }
 }
</script>

Was ist der Unterschied zwischen Parametern und Abfrageparametern? ? ? Sie können in der Adressleiste sehen, dass der Inhalt der Parameter nicht in der Adressleiste angezeigt werden kann. Es ist ein bisschen wie bei Post-Parametern in Ajax. Wenn die Abfrage Parameter übergibt, können Sie die übergebenen Parameterinformationen sehen in der Adressleiste. Es ist ein bisschen wie die individuelle Parameterübergabe von Ajax

Wenn Sie setId als separaten Parameter übergeben, lautet die Adresse in der Adressleiste wie folgt:

Der erste Weg: Pfad – Übergabeparameter abfragen

Der zweite Weg: Name – Parameter zum Übergeben von Parametern

Aber im Allgemeinen besteht das Übergeben von Parametern darin, ein Objekt zu übergeben. Wenn ein Objekt übergeben wird, sieht die Adresse in der Adressleiste wie folgt aus:

Der erste Weg: Pfad – Abfrage übergeben. Siehe

Zweite Methode: Name – Parameter zum Übergeben von Parametern

<p id="app">
			<p v-show="isShow">微风轻轻的吹来，带来了一丝丝凉意</p>
			<p>
				<button type="button" v-on:click="show(1)">显示</button>
				<button type="button" v-on:click="show(0)">隐藏</button>
			</p>
		</p>
		
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isShow:true
			},
			methods:{
				show:function(type){
					if(type){
						this.isShow = true;
					}else{
						this.isShow = false;
					}
				}
			}
		})

Weitere programmierbezogene Kenntnisse finden Sie unter: Programmierlernkurs! !

Das obige ist der detaillierte Inhalt vonWie springe ich zur Seite in vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!