Vue分享QQ却只能访问首页的解决方法

之前的代码为了能够分享当前文章到QQ我是这样写的

shareToQQ(){
      let url = `https://connect.qq.com/widget/shareqq/index.html?url=https://我的网站/#/article/${this.id}&source=https://我的网站.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://我的网站.com${this.article.cover_image}`
      window.open(url)
    }

结果出现了发给好友，好友打开的不是文章详情页，而是网站的首页，思考了几天，最后在一个地方发现别人的写法：

<a class="lqq" target="_blank" href="javascript:void(0);" οnclick="window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(document.location.href) + '

&desc=邀请详情&title=标题&summary=简介&pics=&flash=&site=邀请人或网站&callback="  title="QQ登录">qq</a>

发现它的url外面有encodeURIComponent(document.location.href)包裹，于是我改了下自己的代码：

shareToQQ(){
      let href = `https://我的网站.com/#/article/${this.id}`
      let url = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(href)}&source=https://我的网站.com&title=${this.article.title}&summary=${this.article.content.slice(0, 42)}&desc=${this.article.title}&pics=https://我的网站.com${this.article.cover_image}`
      window.open(url)
    }

问题解决！主要的区别就是把网址单独写了一个变量并用encodeURIComponent()方法包裹，可能是QQ那边不支持我原有的写法吧，也希望大家能够帮忙解答一下，不过最后还是解决了问题。