vue 单页面应用分享

vue 单页面应用分享

微信分享对 hash 路由不太友好，分享经常失败，记录一次踩坑过程

hash(哈希路由的处理)

只需要把分享的链接 # 替换成 ?#
比如要分享的链接是:http://test.com/dist/#/index/index。只需要改成 http://test.com/dist/?#/index/index 问题即可解决

---

微信验签失败的问题

我们要用微信分享，需要配置合法域名，JS 安全域名，生成 APPID 和密钥，然后由服务端把对应信息传给微信，生成对应的加密信息传给前端。
如果以上需要的东西都排除没问题后，那问题可能就出在验签的链接！

【重点！！】 验签的时候需要传递一个前端的 url
比如当前要分享的页面也是 http://test.com/dist/#/index/index

那么我们要传过去验签的路径应该为 : http://test.com/dist。即 # 前面的一段

---

微信配置成功，可是分享出去的标题，图片不是预期设置的

如果一路按着微信文档来，应该不会出现大问题，出现这个问题的原因，很有可能就是，分享的方法没写在 wx.ready 里面

因为 wx.config 是一个异步方法，wx.onMenuShareAppMessage 等方法要放在 wx.ready 里面

微信第一次分享成功，从分享链接进去后二次分享失败

出现这个问题，是因为分享出去后的链接，微信会自动多拼接一些参数，标识是从哪里进的链接,如下：
http://test.com/dist/?from=singlemessage#/index/index

注意中间的 from=singlemessage。如果链接一直携带这个参数，那后面的链接都很有可能分享失败

要解决也很简单，只需要把链接的微信的参数去掉
根据 vue-router.所以我们的链接通常不会在 # 之前携带 ?参数。只需要在main.js进行 url 拦截并处理即可

直接贴出我的代码：

router.beforeEach((to, from, next) => {
  // 微信分享携带的其他参数
  if (window.location.search) {
    window.location.href =
      window.location.origin + window.location.pathname + "#" + to.fullPath
  } else {
    next()
  }
})

---

解决了这些，就可以愉快的进行分享了~