Vue Router 在微信浏览器中的跳转问题

背景

之前圈子页面在IOS微信浏览器中存在一个问题：从 /page页面通过route.push() 跳转到/page/2页面以后，页面显示正常，但是在分享以及复制浏览器地址时发现取到的地址仍然是/page。

Vue-Router

Vue-Router有hash、history两种模式，官网使用了history模式，其利用了H5 History API中pushState() 和 replaceState()方法，而IOS微信暂时没有支持这些新特性。这样会使IOS微信浏览器无法检测到HTML History PushState变化，就会导致在单页面应用中IOS微信浏览器只会记住第一次进来的地址。

解决方案

直接上代码。

router.afterEach((to, from) => {
  const u = navigator.userAgent.toLowerCase();
  if (u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != "micromessenger") {
    return;
  }
  if (to.path !== global.location.pathname) {
    location.assign(to.fullPath);
  }
});

上面的代码很简单，可以放置在Vue入口文件main.js的位置，简单的说：

1. 注册Vue-Router全局后置钩子。

2. 通过 User Agent 判断当前的环境是否是IOS微信。

3. 通过 location.assign 方法载入要加载的页面。

总结

location.assign重新加载了页面资源文件，显得不是很优雅，如果需要更优雅的实现方式，可能需要等微信支持H5相关的API了。