干巴爹兔的博客 干巴爹兔的博客
首页
  • 前端文章

    • JavaScript
    • HTML
    • Vue
  • 学习笔记

    • JavaScript教程
    • React学习笔记
    • Electron学习笔记
  • 开源项目

    • cloud-app-admin
    • 下班了吗Vscode插件
    • Subversion变更单插件
  • Server

    • Django
  • 学习笔记

    • MySQL学习笔记
  • 运维

    • 服务器部署
    • Linux
  • 日常学习

    • 学习方法
关于
收藏
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

干巴爹兔

卑微的前端打工人
首页
  • 前端文章

    • JavaScript
    • HTML
    • Vue
  • 学习笔记

    • JavaScript教程
    • React学习笔记
    • Electron学习笔记
  • 开源项目

    • cloud-app-admin
    • 下班了吗Vscode插件
    • Subversion变更单插件
  • Server

    • Django
  • 学习笔记

    • MySQL学习笔记
  • 运维

    • 服务器部署
    • Linux
  • 日常学习

    • 学习方法
关于
收藏
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript文章

  • 学习笔记

  • 开源项目

  • HTML

  • Vue

    • 分享一个用于Vue的markdown插件
    • Vue分享QQ却只能访问首页的解决方法
    • 自己封装的一个Vue全局Toast插件
    • 使用Vue3.0 beta4与Vite0.6.0制作一个todoList
    • Vue首屏加载提升
    • Vue生成markdown目录索引
    • Vite简单上手
  • 前端
  • Vue
干巴爹兔
2020-04-13

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)
    }
1
2
3
4

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

<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>
1
2
3

发现它的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)
    }
1
2
3
4
5

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

编辑 (opens new window)
#Vue
上次更新: 2022/08/29, 16:40:19
分享一个用于Vue的markdown插件
自己封装的一个Vue全局Toast插件

← 分享一个用于Vue的markdown插件 自己封装的一个Vue全局Toast插件→

最近更新
01
使用Vscode开发一个小插件
10-21
02
Vscode插件配置项监听
10-18
03
使用has属性构造必填效果
10-14
更多文章>
Theme by Vdoing | Copyright © 2020-2023 互联网ICP备案: 闽ICP备18027236号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式