vue路由传参的几种方式

vue路由传参

1.query传参

传递参数:

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

获取参数:this.$route.query.idthis.$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}
  1. 路由跳转并携带params参数,to的对象写法,不需要在路由文件中定义参数
  <router-link :to="{
 	name:"HomeNews", (使用params传参时,必须使用name属性进行路由跳转,不能使用path配置项跳转)
 	params:{
 		id:001,
 		message:messageData
 	}
 }" >router-link>

获取参数:this.$route.params.idthis.$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 {} }
 }

你可能感兴趣的:(vue,vue.js,javascript,前端)