1.router-link路由导航
父组件:使用<router-link to = "/跳转路径/传入的参数"></router-link>
子组件: this.$route.params.num接收父组件传递过来的参数
例如：父：<router-link to="/a/123">routerlink传参</router-link>
子：mounted () {
this.num = this.$route.params.num
}
路由配置: {path: '/a/:num', name: A, component: A}
地址栏中的显示:http://localhost:8080/#/a/123
2.调用$router.push实现路由传参
父组件: 绑定点击事件，编写跳转代码
子组件: this.$route.params.id接收父组件传递过来的参数
例如：父：<button @click="deliverParams(123)">push传参</button>
methods: {
deliverParams (id) {
this.$router.push({
path: `/d/${id}`
})
}
}
子：mounted () {
this.id = this.$route.params.id
}
路由配置:：{path: '/d/:id', name: D, component: D}
地址栏中的显示:：http://localhost:8080/#/d/123
3.通过路由属性中的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
4.通过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
