vue中的三种传递参数方法

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