vue router 跳转php,vue.js怎么进行页面跳转?

本文介绍了在Vue.js中使用`router-link`和`this.$router.push()`进行页面跳转的两种方式,并详细解析了params和query参数的区别。params传递的参数不会显示在URL地址栏中,而query参数会显示。通过实例展示了不同参数传递方式的地址栏表现形式,帮助理解Vue路由的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2f8bb9b194560539c3bc07badc0df4b2.png

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

vue跳转页面的方法

1:router-link跳转

点击跳转2

点击跳转1

点击跳转3

2:this.$router.push()

点击跳转4

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}});

}

}

}

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

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

8f91aa601a3afbaf417d43b733ec96e6.png

第一种方式:path - query 传参

a405188610023d5991a4a84701fd9078.png

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

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

926456efe1fa5d906a7fb4f6c8112456.png

第一种方式:path - query 传参

16e4196d615c05fd9b62fcc53d940cd2.png

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

微风轻轻的吹来,带来了一丝丝凉意

显示

隐藏

var vm = new Vue({

el: '#app',

data: {

isShow:true

},

methods:{

show:function(type){

if(type){

this.isShow = true;

}else{

this.isShow = false;

}

}

}

})

更多编程相关知识,请访问:编程学习课程!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值