vue中的三种传递参数方法

浅浅的花香味﹌ 2023-06-08 06:43 16阅读 0赞

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