顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效

文章目录

  • 四种方式
  • 总结

一、vue路由传值的四种方式？

  • 利用”router-link”路由导航来传递；
  • 调用”$router.push”实现路由传参数值
  • 通过路由属性中的name匹配路由，再根据params传递参数值
  • 通过query来传递参数值

二、使用步骤

1.router-link路由导航

父组件:使用

例如：routerlink传参

子组件:this.$route.params.num接收父组件传递过来的参数

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

路由配置:：{path: '/a/:num', name: A, component: A}

地址栏中的显示:：http://localhost:8080/#/a/123

2.调用$router.push实现路由传参

父组件:绑定点击事件，编写跳转代码

  methods: {    deliverParams (id) {      this.$router.push({        path: `/d/${id}`      })    }  }

子组件:this.$route.params.id接收父组件传递过来的参数

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

路由配置:：{path: '/d/:id', name: D, component: D}

地址栏中的显示:：http://localhost:8080/#/d/123

3.通过路由属性中的name匹配路由，再根据params传递参数

父组件:匹配路由配置好的属性名

    deliverByName () {      this.$router.push({        name: 'B',        params: {          sometext: '熊出没'        }      })    }

子组件:

      This is page B!    
传入参数：{{this.$route.params.sometext}}

路由配置:路径后面不需要再加传入的参数，但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示:可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失
http://localhost:8080/#/b

4.通过query来传递参数

父组件:

    deliverQuery () {      this.$router.push({        path: '/c',        query: {          sometext: '我是光头强'        }      })    }

子组件:

      This is page C!    
这是父组件传入的数据: {{this.$route.query.sometext}}

路由配置:不需要做任何修改
{path: '/c', name: 'C', component: C}

地址栏中的显示:相当于在url地址后面拼接参数(中文做了转码)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

总结

以上就是vue路由传值的几种方式是什么的详细内容

参考文章地址：Vue路由传参