Vue单页面应用实现微信浏览器分享文章详情页，解决授权及分享后文章重定向问题

Vue单页面开发的一个文章小应用，打开先跳转到授权页面，授权成功后跳转到文章列表页，然后再跳转到文章详情页，当通过微信自带分享功能分享文章出去后，别人点击链接会出现授权问题的坑，以及单页面哈希路由无法正确跳转详情页的坑。

 data() {
    return {
      configInfo: {},
      newDetailObj: {
        img_url: '',
        title: '',
        desc: '',
      },
      linkUrl:'',
    }
  },

wx.onMenuShareAppMessage({
   title: _this.newDetailObj.title, // 分享标题
   desc: _this.newDetailObj.desc, // 分享描述
   //link: window.location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   link: _this.linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   imgUrl: _this.newDetailObj.img_url, // 分享图标
   type: '', // 分享类型,music、video或link，不填默认为link
   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
   success: function (res) {
   // 用户确认分享后执行的回调函数
   console.log("分享给朋友成功返回的信息为:",res);
   },
   cancel: function (res) {
   // 用户取消分享后执行的回调函数
   console.log("取消分享给朋友返回的信息为:",res);
   }
});

首先，分享的链接不能直接通过window.location获取，需要经过加工，因为“#”后面的内容会自动被屏蔽，所以可以通过某个标识名称，将参数传过去。例如：

var linkUrl = 'https://api.xxxxxxx.com/mp/message?path=messagedetailaaamessageId='+messageId
              
_this.linkUrl = linkUrl

然后，分享的页面中进行判断

var path = getUrlParam('path');

if (path != undefined || path != null) {

} else {

}

如果path不为空的话，对url进行重组，然后重定向到文章详情页。

注意：分享的页面也会先跳转到授权页面，授权的时候也要判断一下链接来源是通过正常途径还是分享途径，微信授权规则还是很严谨的，各个参数的顺序不要随意更换，注意"#"，防止出现奇奇怪怪的BUG。。。