vue.js怎么进行页面跳转？

本教程操作环境：windows7系统、vue2.9版，该方法适用于所有品牌电脑。

vue跳转页面的方法

1：router-link跳转

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

2：this.$router.push()

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

params和query传参数有什么不一样？？在地址栏中可以看到，params传参数时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参

如果单独传setId一个参数的时候，地址栏中的地址如下图：

第一种方式：path - query 传参

第二种方式：name - params传参数

但是一般情况下，传参数是传递一个对象，当传递的是一个对象的时候，地址栏中的地址如下图：

第一种方式：path - query 传参

第二种方式：name - params传参数

<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: '#app', 			data: { 				isShow:true 			}, 			methods:{ 				show:function(type){ 					if(type){ 						this.isShow = true; 					}else{ 						this.isShow = false; 					} 				} 			} 		})

更多编程相关知识，请访问：编程学习课程！！

以上就是vue.js怎么进行页面跳转？的详细内容，更多内容请关注技术你好其它相关文章！