element"; 2. Use "this.$router.push(url address)" Implement the jump."/> element"; 2. Use "this.$router.push(url address)" Implement the jump.">

Home >Web Front-end >Vue.js >How to jump to the page in vue.js?

How to jump to the page in vue.js?

青灯夜游
青灯夜游Original
2020-11-25 17:05:184483browse

How to jump to the page in vue.js?

The operating environment of this tutorial: windows7 system, vue2.9 version. This method is suitable for all brands of computers.

Vue jump page method

1: router-link jump

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

What is the difference between params and query parameters? ? You can see in the address bar that when parameters are passed in params, the content of the parameters cannot be seen in the address bar. It is a bit like post parameters in ajax. When query passes parameters, you can see the passed parameter information in the address bar. It is a bit like Like ajax individual parameter passing

If you pass setId as a separate parameter, the address in the address bar is as shown below:

How to jump to the page in vue.js?

The first way: path - Query passing parameters

How to jump to the page in vue.js?

The second way: name - params passing parameters

But in general, passing parameters is to pass an object. When it is an object, the address in the address bar is as follows:

How to jump to the page in vue.js?

The first way: path - query parameter passing

How to jump to the page in vue.js?

Second method: name - params pass parameters

<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;
					}
				}
			}
		})

For more programming-related knowledge, please visit: Programming Learning Course! !

The above is the detailed content of How to jump to the page in vue.js?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn