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

[tabs-router] 使用多标签页功能时,如果页面使用了params传汉字字符串会导致在当前页面刷新后,tabs-routers重复添加 #532

Open
ngyyuusora opened this issue May 31, 2023 · 6 comments
Assignees
Labels
Issue Shoot The problem is being dealt with ⏹ Pending This issue is pending

Comments

@ngyyuusora
Copy link
Collaborator

ngyyuusora commented May 31, 2023

tdesign-vue-next-starter 版本

0.7.5

重现链接

No response

重现步骤

对一个页面配置path params传参:routerpath/:id/:name,params参数中有汉字字符串
1,通过侧边导航打开该页面(此时该页面会被添加到多标签页导航)
2,在该页面直接刷新(params参数不变,此时该页面又会被添加到多标签页导航)

期望结果

No response

实际结果

出现了同一个页面的重复的两个导航标签(params参数是相同的,并且因为实际上参数一样,点击重复标签是无法跳转过去的,点击没反应。只有从其他路由的页面点击任意一个重复导航标签,都可以正常跳转)

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

通过在tabs-router store中appendTabRouterList打印新增路由可知,主要原因应该是通过router.push跳转到该页面的path为url编码过的,而如果是在该页面直接刷新,路由的path是保留原始汉字字符串的。
image
上图为,在页面中通过按钮等方式router.push,使用name加params跳转到该页面时,路由的path,汉字字符串部分被编码过了。
image
上图为,进入该页面后直接刷新,可见汉字字符串是被保留的。
image
所以导致刷新后,因path不同,认为是两个不同的路由被重复添加

请问这个问题考虑处理吗,是否不推荐使用parmas传递汉字参数。处理起来好像还比较麻烦,因为router.push跳转后拿到的path还不是完全url编码,只是把汉字部分处理了。
如果在appendTabRouterList时,对所有路由都进行url解码,应该可以解决这个问题,即多标签页导航中,只存被解码后的汉字的path字符串,如果碰到path中有%E6%B1%89%E5%AD%97%E5%AD%97%E7%AC%A6%E4%B8%B21这样的字符串,实际存入的是解码后的path: "/learn/course-chapter/1/汉字字符串1。这样是否可行?

@github-actions
Copy link

👋 @ngyyuusora,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@github-actions
Copy link

github-actions bot commented May 31, 2023

♥️ 有劳 @PengYYYYY 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @ngyyuusora

@ngyyuusora ngyyuusora changed the title [tab-router] 使用多标签页功能时,如果页面使用了params传汉字字符串会导致在当前页面刷新后,tabs-routers重复添加 [tabs-router] 使用多标签页功能时,如果页面使用了params传汉字字符串会导致在当前页面刷新后,tabs-routers重复添加 May 31, 2023
@timi137137
Copy link
Collaborator

这个问题,如果处理的话会直接给存进去的path做完全url编码处理,如果你有时间可以提个PR解决

@timi137137 timi137137 added the Issue Shoot The problem is being dealt with label May 31, 2023
@ngyyuusora
Copy link
Collaborator Author

这个问题,如果处理的话会直接给存进去的path做完全url编码处理,如果你有时间可以提个PR解决

有点忙我先不认领了,简单试了下发现需要把涉及到路由项的每个地方都梳理一下是否需要解码path,否则多标签页高亮等功能会失效,之后有空了再修复下

@timi137137
Copy link
Collaborator

OK你有空随时来()

@timi137137
Copy link
Collaborator

查看了一下,router4开始,固定规范了path and fullPath都是URL编码,但params固定不进行URL编码,因此这个问题需要看看怎么解决比较好

@timi137137 timi137137 added the ⏹ Pending This issue is pending label Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Issue Shoot The problem is being dealt with ⏹ Pending This issue is pending
Projects
None yet
Development

No branches or pull requests

3 participants