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
}

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