解决vue中使用history.replaceState 更改url vue router 无法感知的问题

 更新时间:2022年09月19日 11:04:15   作者:Gleason.  
这篇文章主要介绍了vue中使用history.replaceState 更改url vue router 无法感知的问题,本文给大家分享修复这个问题的方法,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

vue中使用history.replaceState 更改url vue router 无法感知的问题

描述

最近做一个需求,URL更新不刷新页面,在网上找了 好多文章都说 router.replace 更新URL不会刷新页面(前提是路由为 history 模式),我也用了,一开始是没问题的,可以实现需求,但是后来URL变得越来越复杂,会导致URL更新时,会触发mounted执行,这样的话页面就会刷新,后来更换了 history.replaceState API 更新URL,页面确实不刷新了,但是也带来了新的问题,就是 vue router 无法感知到URL的变化 ,举个例子吧

假设

url:www.eg.com/index?a=1
使用router.replace 更新 url this.$router.replace('www.eg.com/index?a=2')
输出 fullpath console.log(this.$route.fullPath) => www.eg.com/index?a=2
这个结果是对的;

如果使用 history.replaceState 更新url就会出现问题
使用 history.replaceState 更新 url history.replaceState(null,'','www.eg.com/index?a=2');url 确实是更新了,
输出 fullpath console.log(this.$route.fullPath) => www.eg.com/index?a=1

结论: this.$route 就没有被更新

如何修复这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 这个 stateObj 其实就是查询参数的 key value 转换成的对象
const stateObj = {
    a:2,
    b:3
}
history.replaceState(stateObj, 'title', 'www.eg.com/index?a=2&b=3')
// 将原来的 this.$route 克隆一份
const _route = Object.assign({},this.$route);
// 更新 fullPath
_route.fullPath = 'www.eg.com/index?a=2&b=3'
// 更新 参数
_route.params = stateObj
// 调用 router.history 里的更新方法 cb 传入最新的route就可以了
this.$router.history.cb(_route)
// 我们再次输出 fullPath
console.log(this.$route.fullPath) => 'www.eg.com/index?a=2&b=3'

问题到这里就修复了

其实 使用 history api 更新 URL 这个功能 react router 早在 V3 版本就已经实现了,话说这已经是 5 ,6 年前的问题了, 也就是说 使用 history api 更新url react router 是可以感知到 URL 变化的并且会被记录,但是vue没有,还好有router.history.cb这个回掉,不然神仙都解决不了这个问题。。。。

到此这篇关于vue中使用history.replaceState 更改url vue router 无法感知的问题的文章就介绍到这了,更多相关vue url vue router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/bianliuzhu/article/details/126874967

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论