SPA在微信中复制、分享链接的问题

在微信中使用一个SPA应用时,复制当前链接、分享好友或者朋友圈、以及在浏览器中打开,链接始终是初始进入的路由。
举个例子:
你在微信中点击进入了一个SPA单页面:
www.baidu.com/main
当你做了一系列操作,路由跳转到了:
www.baidu.com/detail
这时点击右上角,
在这里插入图片描述
无论是复制链接,分享给好友还是朋友圈,或者在浏览器中打开,url始终是www.baidu.com/main。
不要慌,你的页面没有毛病,这是因为微信浏览器对histroy的支持还还全面,只保存了第一条history记录。
有两个解决方案:

  1. 使用微信的jssdk,可以配置分享好友和朋友圈的链接,但是复制链接和浏览器中打开不行;
  2. 可以使用history.replace,替换微信浏览器仅存的一条histroy记录为当前路由;
/**
 * 在微信浏览器内只保存一条history记录,使用history.replace替换成当前路由
 * 增加一个标志参数,这样可以避免重复replace
 */
const wxRefresh = () => {
  const PARAM_NAME = 'wxReplaceTime'; // 新增的参数名
  const { protocol, host, pathname, hash, search } = window.location;
  if ( search.indexOf(PARAM_NAME) > -1 ) return; // 避免重复刷新,参数已存在
  const replaceQueryParam = ( paramName, newVale ) => {
    const reg = new RegExp(`([?;&])${paramName}[^&;]*[;&]?`);
    const query = search.replace(reg, '$1').replace(/&$/, '');
    return (query.length > 2 ? `${query}&` : '?') + (newVale ? `${paramName}=${newVale}` : '');
  };
  window.location.replace(
    `${protocol}//${host}${pathname}${replaceQueryParam(PARAM_NAME, new Date().getTime())}${hash}`
  );
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值