小编给大家分享一下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进行页面跳转的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。