本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue路由传参值的方法一、router-link路由导航
父组件: 使用393060e6ec4dab8f1c1798bb307adc14d625018d6d57dc2163f3a71531b24864
例如：dccb39444cc9afb7c247dfbd5be957b3routerlink传参d625018d6d57dc2163f3a71531b24864
子组件: this.$route.params.num接收父组件传递过来的参数
mounted () { this.num = this.$route.params.num}
路由配置:：{path: '/a/:num', name: a, component: a}
地址栏中的显示:：http://localhost:8080/#/a/123
二、调用$router.push实现路由传参
父组件: 绑定点击事件，编写跳转代码
<button @click="deliverparams(123)">push传参</button> 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
三、通过路由属性中的name匹配路由，再根据params传递参数
父组件: 匹配路由配置好的属性名
<button @click="deliverbyname()">params传参</button> deliverbyname () { this.$router.push({ name: 'b', params: { sometext: '一只羊出没' } }) }
子组件:
<template> <div id="b"> this is page b! <p>传入参数：{{this.$route.params.sometext}}</p> </div></template>
路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致
{path: '/b', name: 'b', component: b}
地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失
http://localhost:8080/#/b
四、通过query来传递参数
父组件:
<button @click="deliverquery()">query传参</button> deliverquery () { this.$router.push({ path: '/c', query: { sometext: '这是小羊同学' } }) }
子组件:
<template> <div id="c"> this is page c! <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p> </div></template>
路由配置: 不需要做任何修改
{path: '/c', name: 'c', component: c}
地址栏中的显示: (中文做了转码)
http://localhost:8080/#/c?sometext=%e8%bf%99%e6%98%af%e5%b0%8f%e7%be%8a%e5%90%8c%e5%ad%a6
相关推荐：《vue.js教程》
以上就是vue路由传值的几种方式是什么的详细内容。