Comment accéder à une page dans vue.js ?

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.9 Cette méthode convient à toutes les marques d'ordinateurs.

Méthode de page de saut Vue

1 : saut de lien de routeur

<!-- 直接跳转 -->
<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>

Quelle est la différence entre les paramètres et les paramètres de requête ? ? On peut voir dans la barre d'adresse que lorsque des paramètres sont passés dans params, le contenu des paramètres n'est pas visible dans la barre d'adresse. C'est un peu comme les paramètres de publication en ajax. Lorsque la requête passe des paramètres, les informations sur les paramètres transmises peuvent être. vu dans la barre d'adresse. C'est un peu comme les paramètres individuels d'ajax

Si vous passez setId comme paramètre seul, l'adresse dans la barre d'adresse est la suivante :

La première façon : chemin - requête passant les paramètres

La deuxième façon : nom - paramètres passant les paramètres

Mais en général, passer les paramètres est de passer un objet. Lorsqu'il s'agit d'un objet, l'adresse dans la barre d'adresse est la suivante :

La première façon : chemin - passage du paramètre de requête

Deuxième méthode : nom - params pass paramètres

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

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours d'apprentissage en programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!