关于Vue单页面实现微信分享的Bug

// 问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？from= & Timeline= 之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。

//该问题产生的原因可能是由于vue的hash模式，微信浏览器只记录了第一次访问的页面，而跳转路由改的hash值，浏览器并没有把他识别为一个新的页面链接，导致每次分享的链接都会跳到初次访问的页面。

//此处我的解决方案是在每个页面加载的时候都调用微信的api获取签名

//二次分享签名失败的解决方法需要后台从Refere中获取链接 换取签名

import axios from 'axios'
const rootPath = process.env.NODE_ENV === 'development'
    ? `/api`
    : ``
export default {
    wxShowMenu : function() {
        var href = window.location.href.split('#')[0];
        //删除二次分享时微信在链接中拼接的部分（该部分当时考虑的是解决二次分享签名失败，但是并没有起效，需要后台从Refere中获取链接）
        if(href.indexOf('?from=singlemessage&isappinstalled=0') > -1) {
            href = href.replace('?from=singlemessage&isappinstalled=0', '')
        }else if(href.indexOf('?from=timeline&isappinstalled=0') > -1) {
            href = href.replace('?from=timeline&isappinstalled=0', '')
        }else if(href.indexOf('?from=groupmessage&isappinstalled=0') > -1) {
            href = href.replace('?from=groupmessage&isappinstalled=0', '')
        };
        axios.get(rootPath + `/weixin/jsSignature?url=` + href).then((res) => {
            wx.config({
                debug: false,
                appId: res.data.appid,
                timestamp: res.data.timestamp,
                nonceStr: res.data.noncestr,
                signature: res.data.signature,
                jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline'
                ]
            });
        wx.ready(function () {
            
            // 分享给朋友
            wx.onMenuShareAppMessage({
                title: '', // 分享标题
                desc: "", // 分享描述
                link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享链接
                imgUrl: '', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // window.alert('已分享给好友');
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                },
                fail: function (res) {
                    // window.alert(JSON.stringify(res));
                }
            });

            // 分享到朋友圈
            wx.onMenuShareTimeline({
                title: '', // 分享标题
                desc: "", // 分享描述
                link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享链接
                success: function () {
                    // window.alert('已分享到朋友圈');
                },
                cancel: function () {
                },
                fail: function (res) {
                    // window.alert(JSON.stringify(res));
                }
            });
        });
    })
}
}

//main.js中注册全局方法

import WXConfig from './assets/js/wxApi' // 微信分享

Vue.prototype.WXConfig = WXConfig;

//在需要分享的页面中初始化时调用

mounted() {
  this.WXConfig.wxShowMenu(); 
}