问题描述:
单页面程序(如:使用vue框架搭建的单页面应用),在微信环境中,使用微信原生的分享功能,进行页面分享时,安卓设备正常,分享那个页面,进来就是那个页面。但是在ios设备中,无论在那个页面分享,进入时始终进入的是初次进入应用时的页面。
问题环境:
ios设备,vue单页面程序
问题原因:
vue单页面应用中,把第一次打开的页面叫做进入页,之后通过路由跳转的页面(通过pushState或replaceState改变的url)叫做当前页。而在Android设备中,浏览器记录的是当前页的url信息;IOS设备中,浏览器记录的是进入页面信息
解决方案:
以vue框架搭建为例。在进入页面时,将需要分享的页面刷新加载location.assign(),路由元信息meta中的字段isShare做页面分享处理,true:表示需要处理;false:表示不需要处理。解决方案有多种,解决原则就是改变浏览器的页面路径记录信息。
具体实现:
// 路由配置,设置元信息 isShare
{
path: '/share',
name: 'Share',
component: Share,
meta: {
isShare: true
}
}
// 在全局路由守卫中设置
router.beforeEach((to, from, next) => {
if ((to.fullPath !== window.location.hash.slice(1)) && to.meta.isShare) {
let href = window.location.href;
href = href.replace(href.hash, ('#' + to.fullPath)); // hash模式下的页面路径拼接方式
window.location.assign(href);
next();
}
...
})