vue中的三种传递参数方法
程序员文章站
2022-03-03 10:12:18
...
<div class="shopLine" @click="goDetails(item.id)" v-for="item,index in cart">
<button @click="goThird">点击跳转第二种方式传参</button>
<button @click="goSi">点击跳转第三种方式传参</button>
在methods方法下
methods:{
//也是path的方式来去传递动态路由参数
//#/second/00001
goDetails(isd){
this.$router.push({
path:'/second/'+isd
})
},
goThird(){
//第二种方式传参 不需要匹配路由中做配合
//是用 路由的别名 name 来去做跳转
//并且是用 params 来去传递参数
//#/thrith
// this.$router.push({
// name:'Thrith',
// params:{
// pid:'123456'
// }
// })
this.$router.push({
path:'/thrith'
})
},
//第三种方式 也是用 path 来去匹配相应的路由
//传递参数 是用 query来去传递参数
//#/si?pid=1234567 和get请求传递参数 是一致
goSi(){
this.$router.push({
path:'/si',
query:{
pid:'1234567'
}
})
}
}
在second , thrith , si ,页面取参数
second 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数
mounted(){
//console.log('111')
//在vue 提供了 this.$route.params.id 来去获取 动态路由传过来的参数
//获取参数 id 意思 是路由配置中所写的参数 跟router index.js 中设置的名字是一样
var id = this.$route.params.id;
console.log(id);
//http 请求 把 这个id 当做参数 向后台服务器 请求数据
//拿到result
//this.cart = result
}
si 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数
mounted(){
var id = this.$route.query.pid;
console.log(id);
}
thrith 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数
mounted(){
//第二种方式传递的参数 和第一种方传递的参数 获取的时候 都是一致
//第二种方式传递的参数 在刷新过后就不会存在了
//这个方式的传递的参数 安全系数 就比较高
//一般是用在 参数只能够使用一次的 接口 比如 支付
// var id = this.$route.params.pid;
// console.log(id);
}
上一篇: vue中路由跳转传递参数的三种方式