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

Posted 2021-10-15 Zhuangvi

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

• • 第一种方式
  • 第二种方式
  • 第三种方式

第一种方式

必须在路由的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
}

注：传递的参数会显示在地址栏上，中文会进行相应的转码.