vue页面之间的传参

vue.cli是一个很好用的vue脚手架，由于其页面是由多个组件组成，传参问题也是vue项目中的非常重要的问题，以下是利用router方式传参的方法。

一、vue传参：

在vue实例内部，我们可以通过$router来访问路由实例。
1、声明式：
直接在html页面中创建链接，利用链接进行传参

<router-link :to="跳转地址（可以携带参数）">
//"router-link"在vue中是相当于a标签的存在
</router-link>

传参实例：

//向页面"name=ManProduct"页面跳转，参数是"id=data",
//其中参数data可以是静态参数，也可以是动态参数
<router-link :to="{name: 'ManProduct', params: { id: data}}">
</router-link>
//向页面"name=ManProduct"页面跳转，参数是"userId= '123",
//其中参数是静态参数
<router-link :to="{name: 'ManProduct', params: { userId: '123'}}">
</router-link>

接收参数实例：
①在body标签中接收

{{$route.params.id}}

②在js中接接收

export default {
	data(){
		return {
			//定义一个接收的参数，直接接受参数
			recData1:this.$route.params.id;
			recData2:this.$route.params.userId;
		};
	},
}

2、编程式：
在js代码中

router.push(跳转路径)
//该方法的参数可以是一个字符串路径，或者一个描述地址的对象

跳转传参实例：
①路由跳转，不带参

//直接跳转到home页面
this.$router.push('home')
//带参数

②name + params传参

//命名的路由，向user页面传参，传参是是对象形式，userId的值
this.$router.push({name:'user',params:{userId:userId.val}})

//接收params传参，参数是userId.val的数据，也可以直接在body页面中引用
this.$router.params.userId,

③path + query传参

//向路径为home的页面传参
this.$router.push({path:'/home'，query:{userId:userId.val})

//接收query传参，参数是userId.val的数据，也可以直接在body页面中引用
this.$router.params.userId,

④props传参

//
let routes = [
	//只跳转，不传参，
	{
		path:'/user',
		name:'user',
		props:true,
		meta:{},
		component:()=>import('@/pages/user.vue')
	},
	//传参，路径后面加一个占位符“:homeId”,props设置为bool类型ture。　跳转页面时使用this.$router.push传参
	{
		path:'/home/:homeId',
		name:'home',
		props:ture,
		meta:{},
		component:()=>import('@/pages/home.vue')
	},
]

接收参数

//先放到props中，然后this.homeId即可拿到
export default {
  props:['homeId'],
  mounted(){
  	//输出传参的值
    console.log(this.$route.params.id, this.homeId)
  }
}

总结：

取值方法1：可以直接使用this.$route.params.id取值。
取值方法2：也可以先放到props中，就可以直接用this.id拿到了。

原文：https://router.vuejs.org/zh/guide/essentials/navigation.html

Python 面试100讲（基于Python3.x）