【Vue】Vue-Router传参的三种方式

结合两位博主，按照自己容易理解方式做了归纳

一共三种：

• 动态路由传参

• this.$router.push params(通过name映射)

• this.$router.push query(通过path映射)

一、动态路由传参

（1）路由配置（冒号声明变量）

?

1	{path: '/father/son/:id', name: D, component: D}

（2）地址栏中的显示

?

1	http://localhost:8080/#/father/son/44

（3）传值（字符串拼接形式）

?

1	<router-link :to="'/user/'+userid" tag="button">用户</router-link>

　　or

?

1 2 3 4 5 6 7 8

<a @click="clickHand(123)">push传参</a>   methods: {     clickHand(id) {       this.$router.push({         path: `/d/${id}`       })     }   }

（4）取值

子组件通过 this.$route.params.num 接受参数

?

1 2 3

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

二、this.$router.push params(通过name映射)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//路由配置文件中 {      path: '/detail',      name: 'Detail',      component: Detail    } //跳转时页面 this.$router.push({   name: 'Detail',   params: {     name: '张三'，     id: 1,   } }) // 取值 this.$route.params

地址栏显示

http://localhost:8080/detail/1

三、this.$router.push query(通过path映射)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//路由配置文件中 {      path: '/detail',      name: 'Detail',      component: Detail    } //跳转时页面 this.$router.push({   path: '/detail',   query: {     name: '张三'，     id: 1,   } })    //跳转后页面获取参数对象 this.$route.query

　　地址栏显示

?

1	http://localhost:8080/#/detail?name=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

　　

参考：

1、vue-router传参的四种方式超详细

2、vue-router路由传参的三种方式