小编给大家分享一下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进行页面跳转的方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
