vue.js进行页面跳转的方法

小编给大家分享一下vue.js进行页面跳转的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

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进行页面跳转的方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！