vue-router - 微信浏览器中 Vue Router 跳转导致 URL 不更新，如何解决？

Question

Vue Router 在微信浏览器中的跳转问题,首页.push进详情页, 再从详情页.push回到首页，发现在微信里的url没更新
本地浏览器 地址栏是变华了的
排查到微信浏览器只记录第一次的地址
更换为哈希路由 发现还是不行
各位大佬 支个招

Answer 1

在微信浏览器中，Vue Router 跳转导致 URL 不更新的问题，可能是由于微信浏览器的一些特殊行为或限制导致的。以下是一些建议的解决方案：

1. 使用哈希路由模式：
   确保你的 Vue Router 配置使用了哈希模式（hash mode）。这可以确保 URL 的变化是通过哈希（#）部分来完成的，而不是完整的 URL。这有助于绕过一些浏览器或微信浏览器对 URL 更新的限制。

   const router = new VueRouter({  mode: 'hash',  routes: [...]})

2. 强制 URL 更新：
   在某些情况下，你可能需要手动触发 URL 的更新。这可以通过编程方式调用 window.location.hash 来实现。

   this.$router.push('/new-path').then(() => {  // 强制更新 URL  window.location.hash = this.$router.history.current.fullPath;});

3. 确保路由配置正确：
   检查你的 Vue Router 配置，确保所有的路由都是正确配置的，并且组件已经正确引入。错误的路由配置可能会导致 URL 不更新。
4. 检查微信浏览器兼容性：
   由于微信浏览器可能存在一些与标准浏览器不同的行为，确保你的代码在微信浏览器中是兼容的。你可以尝试在不同的设备和浏览器版本上测试你的应用。
5. 考虑使用第三方库：
   如果上述方法都无法解决问题，你可以考虑使用第三方库或插件来帮助处理微信浏览器中的 URL 更新问题。这些库可能已经针对微信浏览器的特定行为进行了优化。
6. 调试和日志记录：
   在开发过程中，使用 Vue Devtools 和浏览器的开发者工具来调试你的路由跳转。检查跳转过程中是否有任何错误或警告，并记录日志以帮助你更好地理解问题所在。

请注意，由于微信浏览器的实现可能因版本和平台而异，上述建议可能并不适用于所有情况。如果问题仍然存在，建议进一步深入调查，并考虑在相关的开发社区或论坛上寻求帮助。