Vue 之 vur-router 路由常用的几种传参方式

第一种方式

必须在路由的path上配置相关参数

路由配置（必须）：

{ path: '/details/:id', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ path: `/details/${id}` })
}

获取参数

mounted() {
	let id = this.$route.params.id
}

注：传递的参数显示在地址栏上，刷新页面参数不会丢失。

 

第二种方式

不需要路由有其他额外的配置

路由配置：

{ path: '/details', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ 
		name: `Details` // 这里使用的是路由配置里面的name值
		params: {
			id: id
		}
	})
}

获取参数

mounted() {
	let id = this.$route.params.id
}

注：传递的参数不显示在地址栏上，刷新页面参数会丢失.

 

第三种方式

不需要路由有其他额外的配置

路由配置：

{ path: '/details', name: 'Details', component: Details }

传参

toDetails(id){
	this.$router.push({ 
		path: `/details`
		query: {
			id: id
		}
	})
}

获取参数

mounted() {
	let id = this.$route.query.id
}

注：传递的参数会显示在地址栏上，中文会进行相应的转码，刷新页面参数不会丢失。

 
 

如有不足，望大家多多指点！ 谢谢！