ios设备,在微信环境中,单页面程序(如:vue),页面分享问题

问题描述:
单页面程序(如:使用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();
    }
    ...
})
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值