【Vue router】关于Vue Router 中使用 params 传参，页面刷新参数丢失的问题

最近再面试过程中问题很对前端同学，vue router的传参问题，大家都能够回答，但是当问到使用params 的特性时，总结了一下是这几种回答：

1. 刷新后参数会丢失，
2. 相对query传参不显示再url上，url美观
3. 数据安全。

但是应该思考一下有第一点这个致命的问题存在，仅仅是为了好看，而设计一种程序出来吗？

那么

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。

以上是我的学习总结，希望这篇文章会对你有帮助
文章参考