Vue中history.replaceState修改URL后，为何Vue Router无法感知？

本文共计796个文字，预计阅读时间需要4分钟。

在Vue中使用`history.replaceState`更改URL，但Vue Router无法感知到变化的问题描述及解决方案：

描述：在使用Vue Router时，尝试通过`history.replaceState`更新URL，但发现路由没有更新页面，仍然显示旧的页面内容。

解决方案：

1.确保在调用`history.replaceState`时，传递了正确的状态对象和URL。例如：

javascript history.replaceState(null, '', '/new-url');

2.如果问题仍然存在，可以尝试使用`router.replace`来更新URL。`router.replace`与`history.replaceState`功能类似，但它是通过Vue Router的API来实现的，可以确保路由更新：

javascript this.$router.replace('/new-url');

3.确保在调用这些方法后，没有触发其他的路由导航或页面刷新行为。

通过以上方法，通常可以解决使用`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 就没有被更新

如何修复这个问题

// 这个 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更改urlvuerouter无法感知的问题的文章就介绍到这了,更多相关vueurlvuerouter内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！