解决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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
解决vue-router进行build无法正常显示路由页面的问题
下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题
这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)
项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下2024-04-04解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题
这篇文章主要介绍了解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
这篇文章主要给大家介绍了利用vue2如何实现div contenteditable="true",就是类似于v-model的效果,文中给出了两种解决的思路,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。2017-02-02
最新评论