vue不同页面间传参的各种方式

一、使用router-link进行路由导航，传递参数

=> 父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航

child是子页面路由路径，123是需要传递的参数

=>子组件中：使用this.$route.params.num来接收路由参数

此时，页面上渲染出路由传递过来的参数num，呈现123

=>路由配置文件中：

num用来为参数占位

=>地址栏中：

在地址栏中显示传递的参数num,即123, ，刷新页面，参数不丢失

二、直接调用$router.push 实现携带参数的跳转

=> 父组件中：

模板渲染中调用函数，传递参数

=> 子组件中：

仍然使用 this.$route.params.id  获取参数

=> 路由配置文件中：

id用来为参数占位

=> 地址栏中：

在地址栏中显示传递的参数id, ，刷新页面，参数不丢失

三、通过路由属性中的name来确定匹配的路由，通过params来传递参数

=> 父组件中：

使用name来匹配路由

=> 子组件中：

<