【Vue router】关于Vue Router 中使用 params 传参,页面刷新参数丢失的问题
本文聊一聊vue router 使用params传参,页面刷新时参数会不会丢失,以及params传参和query传参各自的特点
最近再面试过程中问题很对前端同学,vue router
的传参问题,大家都能够回答,但是当问到使用params
的特性时,总结了一下是这几种回答:
- 刷新后参数会丢失,
- 相对query传参不显示再url上,url美观
- 数据安全。
但是应该思考一下有第一点这个致命的问题存在,仅仅是为了好看,而设计一种程序出来吗?
那么
params 传参,参数真的会丢失吗?
params 传参,参数真的会丢失吗?
params 传参,参数真的会丢失吗?
是的,刷新真的会丢失
但是!
如果仔细看文档就会发现,参数丢失,有可能是我们的用法错了,再文档中有这样一个不起眼的实例:
1. 首先要创建一个动态路由
参见:动态路由匹配
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
2. 然后进行动态路由传参
参见:编程式的导航
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123 这里参数就展示到了url上
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
3.跳转后url显示:
http://127.0.0.1:81/user/123
上文就可以看出使用params传递的参数被写进了url,这时候无论页面怎么刷新,user id都会一直存在地址栏中,页面获取参数的时候只需要使用route.params.userId
便可。
注意:如果提供了 path
,params
会被忽略,
因为我们在做push的时候写了path,解析器就会直接取path属性的值,无法通过关键字:userId
将params中的值替换进去,所以在使用params传参的时候尽量使用name
属性。当然对于动态路由也可以用拼接的方式进行传递参数,不用params
。
针对query和params的传参各自的特点个人总结:
query: 比较灵活,没有条件约束随时可以追加参数,参数显示在了参数(search)的位置,参数的辨识度更高,例如:/name
,/name?name=tom
。
params:正确使用时相对严谨,对于没有在动态路由上定义的参数如果随意增删,会有数据丢失的风险。定于路由时就要考虑好路由参数定义。参数如果为字符串时,辨识度会低于query的方式,例如:/name/:name
,/name/tom
。
以上是我的学习总结,希望这篇文章会对你有帮助
文章参考
更多推荐
所有评论(0)