vue路由传参方法

VUE声明式路由传参:
1.query方式:
传参数:

<router-link  :to="{path:'/index',query:{id:13,name:世界}">router-link>

接收参数:

data(){
		newsData:this.$route.query
	}

2.params方式:
传参数:

<router-link  :to="{name:'index',params:{id:13,name:世界}">router-link>

设置路由名称name:

{path:'/index',name:'index',component:index}

接收参数:

data(){
		newsData:this.$route.query
	}

vue编程式路由传参:
1.query方式:
添加点击事件传参数:

<div @click="sendData">发送div>
methods:{
	sendData(){
		this.$router.push(path:'/index',query:{name:'世界'})
	}
}

接收参数:

data(){
	return{
		name:this.$route.query.name
	}
}

2.params方式:

<div @click="sendData">发送div>

路由设置name:

{
	path:'/index',name:'index',component:index
}
methods:{
	sendData(){
		this.$router.push(name:'index',params:{name:'世界'})
	}
}

接收参数:

data(){
	return{
		name:this.$route.params.name
	}
}

你可能感兴趣的:(vue路由传参方法)