『解疑』vue路由hash模式在qq网页分享中截断#号后的hash值问题解决

最新推荐文章于 2022-10-03 16:33:57 发布

DemoJx

最新推荐文章于 2022-10-03 16:33:57 发布

阅读量774

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/demojx/article/details/107862755

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题

场景：
在使用qq网页分享中，分享的网页采用的是vue的单页面应用，路由采用的是哈希模式，由于浏览器会自动截断#号后的hash值，导致分享后的链接不全。

分享的链接：
http://127.0.0.1:8080/#/reportEdit/test01/test003?spName=test01&dpName=test003
拿到的链接：
http://127.0.0.1:8080

解决

解决方案有两个：

直接使用encodeURIComponent，对分享的链接进行编码。
借用一个html进行路由重定向。

方案一：

直接使用encodeURIComponent，对分享的链接进行编码。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 —w3school

// qq分享方法
    shareQQFun() {
      let shareUrl = location.href.split('#')[0] + '#/reportView' + '?spName=' + getQueryString("spName") + '&dpName=' + getQueryString("dpName")
      let currentUrl = encodeURIComponent(shareUrl)
      console.log('[qq分享内容]',shareUrl)

      let common = {
        url: currentUrl,
        showcount: '会话',
        title: '标题',
        summary: '',
        desc: '描述',
        pics: ''
      }
      //地址拼接参数
      var urlData = `https://connect.qq.com/widget/shareqq/index.html?url=${common.url}&showcount=${common.showcount}&desc=${common.showcount}&summary=${common.summary}&title=${common.title}&pics=${common.pics}&style=203&width=19&height=22`
      window.open(urlData, '_blank')
    }

方案二：

借用一个html进行路由重定向。

步骤：

在static内新建一个html，命名为redirect.html
在redirect.html内编写重定向业务逻辑（以下提供最简易重定向代码）
重写分享链接

redirect.html代码：

<!-- 用于重定向 -->
<script>
    let url = location.href.split('redirectUrl=')
    if(url[1]){
        window.location = url[1]
    }
</script>

分享方法代码：

// qq分享方法
    shareQQFun() {
      let shareUrl = location.href.split('#')[0] + '#/reportView' + '?spName=' + getQueryString("spName") + '&dpName=' + getQueryString("dpName")
     let currentUrl = location.href.split('#')[0] + 'static/redirect.html?redirectUrl=' + shareUrl
      console.log('[qq分享内容]',shareUrl)
      
      let common = {
        url: currentUrl,
        showcount: '会话',
        title: '标题',
        summary: '',
        desc: '描述',
        pics: ''
      }
      //地址拼接参数
      var urlData = `https://connect.qq.com/widget/shareqq/index.html?url=${common.url}&showcount=${common.showcount}&desc=${common.showcount}&summary=${common.summary}&title=${common.title}&pics=${common.pics}&style=203&width=19&height=22`
      window.open(urlData, '_blank')
    }