vue路由传参的几种方式

vue路由传参

1.query传参

传递参数：

 1. 路由跳转并携带query参数，to的字符串写法 messageData是一个变量
 <router-link :to="`/home/news?id=001&message=${messageData}`" ></router-link>
 
 2. 路由跳转并携带query参数，to的对象
 <router-link :to="{
 	path:"/home/news",
 	query:{
 		id:001,
 		message:messageData
 	}
 }" ></router-link>

获取参数：this.$route.query.id 、 this.$route.query.message

2.params传参

传递参数：

1. 路由跳转并携带param参数，to的字符串写法 ，首先我们要在路由文件中定义我们要传递的参数

 {
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
    	{
    		name:'HomeNews'
    		path:'news/:id/:title',//二级路由,定义参数，表示第一个参数是id，第二个是message
    		component:News,
    	},
  },

跳转时直接斜杠/后面拼接参数

 1. 路由跳转并携带params参数，to的字符串写法 messageData是一个变量
 <router-link :to="`/home/news/001/${messageData}`" ></router-link> //即{id:001,message:xxx}

2. 路由跳转并携带params参数，to的对象写法，不需要在路由文件中定义参数

  <router-link :to="{
 	name:"HomeNews", (使用params传参时，必须使用name属性进行路由跳转，不能使用path配置项跳转)
 	params:{
 		id:001,
 		message:messageData
 	}
 }" ></router-link>

获取参数：this.$route.params.id 、 this.$route.params.message

3.路由props配置

传参配置：
src/router/index.js

 {
    name:'HomeNews'
    path:'news/:id',//二级路由,定义参数，表示第一个参数是id，第二个是message
    component:News,
    // 第一种写法：props值为对象，该对象中所有的key-value最终都会通过props传递给组件news
    // props:{a:1},
    // 第二种写法(只能params)：props值为Boolean，为true时把路由收到的`params`参数通过props传递给组件news
    // props:true,
    // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传递给组件news
   	props:function(route){
   		return {
   			id:route.query.id,
   			message:route.query.message
   		}
   	},
 },

使用:
New.vue

 export default {
 	props:['id','message']
 	data(){ return {} }
 }