Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复页面刷新子路由参数丢失的问题 #664

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ppnoHZ
Copy link

@ppnoHZ ppnoHZ commented Aug 11, 2023

当开启路由同步的时候,子页面有带参数,刷新浏览器子应用获取不到参数

  • 提交符合commit规范
  • 文档更改
  • 测试用例添加
  • npm run test通过
详细描述
  • 问题描述
    开启路由同步之后,子应用携带query参数跳转到自己的路由时,页面刷新,子应用无法获取到正常的参数。
    是因为一顿给子应用iframe赋值之后,某些参数莫名的被解码了,导致 按照等于号分割的时候,忽略了后面的参数,如下图:

image

当开启路由同步的时候,子页面有带参数,刷新浏览器子应用获取不到参数
@ppnoHZ
Copy link
Author

ppnoHZ commented Aug 11, 2023

补充一下 完整的url 上的参数
pcsd=%2Fpcsd%2F%23%2Fq-product%2Fquality-management-plan%2Flist%2Fdetail%3Fid%3Daa9caa9f72e2470996f27e65c63a0dd7%26mode%3Dview

@yiludege
Copy link
Collaborator

为什么会有两个 ?pcsd 和 ?tid,看你上面 完整的url 没有 tid 这个参数呢

@ppnoHZ ppnoHZ mentioned this pull request Aug 11, 2023
@ppnoHZ
Copy link
Author

ppnoHZ commented Aug 11, 2023

第一个pcsd 是 子应用的名称,是无界处理上去的。第二个是我的nginx代理的路径,访问子应用的静态资源。
更新一下url,下面的url中是 有 tid 的。
?pcsd=%2Fpcsd%2F%23%2Fq-product%2Fproduct-healthcare%2Fobs%2Fdetail%3Ftid%3D4fcb679252964adf88550f56a57a9150%26qmpProductId%3Ddfeb30fe45234460a5495baf35065b30

@xiechao1211
Copy link
Contributor

我们这边也有这个问题,出现在第一次打开子应用时,如果url带参数的话会丢失
这个pr本地测试可行,啥时候能完整走下测试,合并发个版 @yiludege

@yiludege
Copy link
Collaborator

现在的问题是我没有办法复现这个参数丢失的问题,也就没有办法确定这个办法是不是有用,对于url带参数丢失的问题,这个时候浏览器的url 都是什么,可以举一个例子我这边看一下吗

@ppnoHZ
Copy link
Author

ppnoHZ commented Aug 11, 2023

刷新前:?pcsd=%2Fpcsd%2F%23%2Fq-product%2Fproduct-healthcare%2Fobs%2Fdetail%3Ftid%3D4fcb679252964adf88550f56a57a9150%26qmpProductId%3Ddfeb30fe45234460a5495baf35065b30
刷新后,url有一个变化,动作
先变化为(这个是关键):
?pcsd=/pcsd/%23/q-product/product-healthcare/obs/detail?tid=4fcb679252964adf88550f56a57a9150%26qmpProductId=dfeb30fe45234460a5495baf35065b30

后变化为
?pcsd=%2Fpcsd%2F%23%2Fq-product%2Fproduct-healthcare%2Fobs%2Fdetail%3Ftid%3D4fcb679252964adf88550f56a57a9150%26qmpProductId%3Ddfeb30fe45234460a5495baf35065b30

@fanbinghuadev
Copy link

当开启路由同步的时候,子页面有带参数,刷新浏览器子应用获取不到参数

  • 提交符合commit规范
  • 文档更改
  • 测试用例添加
  • npm run test通过
详细描述
  • 问题描述
    开启路由同步之后,子应用携带query参数跳转到自己的路由时,页面刷新,子应用无法获取到正常的参数。
    是因为一顿给子应用iframe赋值之后,某些参数莫名的被解码了,导致 按照等于号分割的时候,忽略了后面的参数,如下图:

image

经排查,这个问题是由于 vue-router 路由重定向导致。一旦重定向后,就相当于对 url 解码了两次。

@fanbinghuadev
Copy link

fanbinghuadev commented Sep 27, 2024

现在的问题是我没有办法复现这个参数丢失的问题,也就没有办法确定这个办法是不是有用,对于url带参数丢失的问题,这个时候浏览器的url 都是什么,可以举一个例子我这边看一下吗

使用 vue3 router,配置个重定向路由,就会复现了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants