本教程操作环境: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传参数
2fb1ec095997abb5abb99340125c8b3b 06fdd44f943ab5c2d9968907541e8f5d微风轻轻的吹来,带来了一丝丝凉意94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee 6fdde8ff278a29a92e4d1bebcf19e075显示65281c5ac262bf6d81768915a4a77ac0 06670e2ee739d5d7c2af577db36c413b隐藏65281c5ac262bf6d81768915a4a77ac0 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 var vm = new Vue({ el: '#app', data: { isShow:true }, methods:{ show:function(type){ if(type){ this.isShow = true; }else{ this.isShow = false; } } } })
更多编程相关知识,请访问:编程学习课程!!
以上是vue.js怎么进行页面跳转?的详细内容。更多信息请关注PHP中文网其他相关文章!