如何从URL链接中提取路径段的password-reset字段用于导航？

需求说明 #

需要从链接路径中提取password-reset字段值用于页面导航，已知可通过queryParameters['code']获取查询参数中的code值，示例待处理链接：
https://test.test.test.test/app/password-reset?code=6294
预期提取结果：password-reset

通用实现逻辑 #

不要手写正则硬切字符串，优先用各语言/运行环境内置的URL解析API处理，容错率更高，能自动兼容末尾斜杠、特殊编码、多查询参数等边界情况：

• 第一步：用内置URL解析工具把链接字符串解析为结构化对象，分离路径部分和查询参数部分
• 第二步：把路径部分按/分隔符拆分为数组，过滤掉分隔产生的空值
• 第三步：根据路由结构取对应位置的路径段值即可

常见场景代码示例 #

1. 浏览器原生JavaScript环境

// 解析目标链接
const url = new URL('https://test.test.test.test/app/password-reset?code=6294')
// 拆分路径段，过滤空值
const pathList = url.pathname.split('/').filter(item => item !== '')
// 示例路径拆分后为['app', 'password-reset']，取对应位置值即可
const targetValue = pathList[pathList.length - 1]
// 输出结果：password-reset

2. Flutter环境

// 解析链接
final uri = Uri.parse('https://test.test.test.test/app/password-reset?code=6294');
// 内置api直接返回拆分好的路径段数组
final pathList = uri.pathSegments;
// 取对应索引值即可
final targetValue = pathList.last;

3. 前端路由框架场景（Vue/React等）
   不需要手动解析原始URL，直接取路由实例提供的路径属性即可：

• Vue Router：通过useRoute().path拿到路径字符串，后续拆分逻辑和原生JS一致
• React Router：通过useLocation().pathname拿到路径字符串，后续拆分逻辑和原生JS一致

注意事项 #

• 如果password-reset不是固定在路径最后一位，根据自身路由结构调整数组取值的索引即可，不需要硬写死取最后一位
• 不要用正则全局匹配password-reset字符串，一旦查询参数、hash值里出现同名字符串会出现匹配错误

内容的提问来源于stack exchange，提问作者Max