vue-router处理刷新query参数消失问题

概念-路由对象属性$route.query 一个 key/value 对象，表示 URL 查询参数。$route.path 字符串，对应当前路由的路径$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。分析当浏览器刷新时，触发导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数解决方案将 next(path

梓喻

5522人浏览 · 2021-09-22 19:52:58

梓喻 · 2021-09-22 19:52:58 发布

概念-路由对象属性

$route.query 一个 key/value 对象，表示 URL 查询参数。
$route.path 字符串，对应当前路由的路径
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。

分析

当浏览器刷新时，触发 导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数

解决方案

将 next(path: to.path) 修改为 next(path: to.fullPath)，这样就不会发生 query 参数消失问题。

参考

完整的导航解析流程

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^