vue路由传参隐藏参数问题

背景

在微前端项目中不同页面切换时，原采用this.$router.push({name:xxx,query:{xxx:xxx})的方式。

跳转时的参数会直接以键值对的形式展示在url上。考虑到安全问题需要将传递参数隐藏。

路由传参方案

• 使用params方式传参

  将路由切换时的传参方式由query修改为params，那么参数不会显示在url中，可实现项目要求。

  this.$router.push({name:xxx, params:{xxx:xxx}})

  但是由于页面初始化时（created阶段）会使用到传递的参数，于是在后期测试时发现，该方式下，如果用户刷新页面，那么页面初始化时获取不到传递的参数会产生报错。

  那么要解决传参后页面刷新问题，产生了两个方案：

• 使用动态路由方式（折中方案X）

  将原路由跳转方式改为动态路由方式/route/:id

  该方案需要注意以下几点：

  • 在微前端情况下，不同的路由被认为是不同的组件。故原query方式下，该页面只允许打开一次，改为动态路由之后，当动态路由上的值不同，就可以打开多个。需要注意业务逻辑是否允许。
  • 动态路由需注意每个参数是否都是必填，是否存在中间某个参数为空的情况。对于可能为空的参数，需要增加分隔符来确保位置准确。
  • 该方案仍会将传参的值显示在url路径上，虽然隐藏了key值，所以仅作为折中方案，并不推荐。

• 在store中保留传递参数

  在每次路由跳转进入之后，需做一个判断。如果携带了参数，那么将参数保存（或者更新）到store中，如果未携带参数，那么从store中获取对应的参数。

  该方案用到了本地存储，需要注意的是：

  • 如果该页面涉及到多个组件，那么子组件需注意不能直接从$route.params取值了，需通过props传递，或者从store中获取。

结论

最后采取的方案是：将路由传参方式修改为params，然后在store中保存路由传参的方式。

注意事项

由于前期子组件中存在直接从$route.params取值的情况，于是试图将路由跳转传递的参数重新放回到$route.params中，尝试如下：

• 在created中直接赋值：this.$route.params={}

  程序报错，提示$route.params只读，故该方案失败。

• 使用this.$route.replace({name:xxx,params{xxx:xxx}})重定向

  试图通过重定向的方式，再次将参数写入$route中，事实证明，当路由跳转到自身时，不会再次出发created()钩子函数，故该方案也失败。