一、环境

vite3+vue3+ts+router

二、问题描述

接微信分享sdk（1.2.0版本）什么的，都已经完成，现在问题出在了分享的url不一致

产品需求是：不同路由页面，分享出来始终保持为首页

现有项目的路由是hash路由，不能改为history的，这是前提

于是自己查阅了网上已有的方法，还是行不通，先贴一下我的处理逻辑：

const imgPath = new URL('@/images/logo.png', import.meta.url).href
// 这里使用了后端封装好的请求
const requestUrl = `${api.wechatShare}?shareUrl=${encodeURIComponent(window.location.href.split('#')[0])}`
axios({ url: requestUrl }).then(({ data }) => {
  let configData: any
  try {
    configData = JSON.parse(data)
  } catch (error) {
    configData = {}
  }
  wx.config({
    debug: false,
    appId: configData.AppId,
    timestamp: configData.Timestamp,
    nonceStr: configData.NonceStr,
    signature: configData.Signature,
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
  })

  wx.ready(function () {
    wx.onMenuShareTimeline({
      title: '分享标题',
      link: window.location.href.split('#')[0],
      imgUrl: imgPath,
      success: function () {},
      cancel: function () {}
    })
    wx.onMenuShareAppMessage({
      title: '分享标题',
      desc: '副标题/描述',
      link: window.location.href.split('#')[0],
      imgUrl: imgPath,
      type: 'link',
      success: function () {},
      cancel: function () {}
    })
  })
  wx.error(function () {})
})

处理逻辑没毛病的对吧，那我就从有问题的页面url开始分析

举个栗子：

分享页面的url由上述代码可以看出，理解成写死的就可以了

正常页面：https://baidu.com/index.html

错误页面：https://baidu.com/index.html#/pageA

安卓手机不管怎么分享，都是正确的

但是苹果手机只要分享出来错误页面，再分享还是错误页面！调试的头疼

三、解决方案

分享url写死了，为啥在ios下就会有问题呢，既然问题无法定位，就粗暴点解决吧

思来想去，用路由守卫判断！！

router.beforeEach((to, from, next) => {
  if (from.fullPath === '/' && to.name === 'pageA') {
    next('/index')
  } else {
    next()
  }
})

简单粗暴，解决完毕！

ps：

微信分享的机制：打开的是链接形态，分享出去也是链接形态。。

我小米手机，用浏览器打开，然后分享到微信就是卡片（小米标识），然后打开卡片重新分享就是带卡片的