vue开发是遇到微信分享“#”问题

作为一个第一次听说vue的菜鸟，我很荣幸在进公司的第二周接手上一位同事留下来的半成品。修修补补、磕磕盼盼的还能坚持下去。这里我要感谢我的老大在这期间的指点，感谢客户那边的各种需求...

使用vue开发时url会带有一个“#”，虽然可以使用“history模式”去掉，但是这需要后端的配合。（注：使用“history模式”刷新页面后会找不到之前的页面）很可惜我这边没发验证这个方法是否正确，还是按照原本的方式吧。微信分享中的分享链接会自动截取“#”前的部分，导致每个分享的页面点击去之后都是首页。这时我们要做的是既然它截取了那我就添加上。然而仅仅这些是不够的，还需要在“#”前加上‘/’。

如：

wxShowMenu : function(title,desc,shareUrl,imgUrl) {
  console.log("当前页面地址："+shareUrl);
  console.log("当前页面地址："+shareUrl.split('#')[0]+"/");
  console.log(VueResource)
  // Vue.http({method: 'post', url: '//admin.zjzhushi.com/api/5b1749a04c650',data:shareUrl,emulateJSON: true}).then(response => {
  Vue.http.post( '//admin.zjzhushi.com/api/5b1749a04c650', {
    'url': shareUrl.split('#')[0]
  }, {emulateJSON: true}).then(response => {
    response = response.body.data;
    console.log(response.jssdk);
    let item = response.jssdk;
    wx.config({
      debug: false,
      appId: item.appId,
      timestamp: item.timestamp,
      nonceStr: item.nonceStr,
      signature: item.signature,
      jsApiList: item.jsApiList,
      url:item.url
    });
    wx.ready(function () {
      wx.checkJsApi({
        jsApiList: item.jsApiList, // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function (res) {
          console.log(res);
        }
      });
      wx.onMenuShareTimeline({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: shareUrl.split('#')[0]+"/"+'#'+shareUrl.split('#')[1], // 分享链接
        imgUrl: imgUrl, // 分享图标
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
      /*分享给朋友*/
      wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: shareUrl.split('#')[0]+"/"+'#'+shareUrl.split('#')[1], // 分享链接
        imgUrl: imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // alert("您已分享");
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // alert('您已取消分享');
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    })
  })
}




个人笔记，仅供参考。欢迎各位大神指点

vue开发是遇到 微信分享“#”问题

vue开发是遇到微信分享“#”问题