最近在项目中遇到了很多页面跳转携带参数的处理，就在这里做个小小的总结，下面来看一下常见的三种传参方式
有如下场景，点击封装好的公共组件跳转到对应的详情页面
<businessTable @click.native="projectDetail(item)"></businessTable>
一 直接调用$router.push 实现携带参数的跳转
在父组件中写点击跳转方法如下
在路由配置页面配置路由如下
要注意的一点是需要在path中添加/:item来对应 $router.push 中path携带的参数。
在子组件中获取传递的参数值。
二 通过路由属性中的name来确定匹配的路由，通过params来传递参数。
在父组件中写点击跳转方法如下
在路由页面配置路由如下
在子组件中获取传递的参数值。
三 使用path来匹配路由，然后通过query来传递参数
在父组件中写点击跳转方法如下
这种情况下 query传递的参数会显示在url后面?item=？
在路由页面配置路由如下
在子组件中获取传递的参数值。
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要
网友评论