项目是nuxt的,虽然vue-router的模式是history,但是在ios里有个问题:当路由变化时,微信浏览器的url不改变,导致从微信浏览器跳转到手机浏览器时,不能打开指定页面。
解决方案:在全局路由守卫后置钩子(afterEach)里,主动修改url
// plugin/route.js
export default ({ app }) => {
app.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)
}
})
}
之所以用全局后置钩子,但是有个页面用了组件内的前置钩子,二者有冲突,导致该页面打不开。
而全局后置钩子在路由守卫顺序中处于最后一个阶段,所以用起来没问题。