欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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