vue微信分享出来的链接点开是首页问题的解决方法

 更新时间:2018年11月28日 11:20:29   作者:纠结灬  
这篇文章主要为大家详细介绍了vue微信分享出来的链接点开是首页问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近工作上遇到了这样一个Bug:“vue微信分享出来的链接点开是首页”

公司网站有PC端和移动端,两个版本。其中如果手机访问PC端,则自动跳转到移动端。(这是常规操作,没啥稀奇点。)

可神奇的问题来了。

在移动端中有微信分享功能,如果手机直接访问手机端的地址进入子页面分享,点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端,分享子页面链接打开将会是主页。

这个问题我也百度了各种方法,折腾了一天,然而都没啥用。

最后自己想了一个替代方案:

static目录下新建一个名为html的文件夹,在html文件夹中再新建一个redirect.html(看到这个文件名是不是知道我要干啥了)

没错,我们做一个重定向。

html中写入以下内容

<script>
 
 let url = location.href.split('?')
 let pars = url[1].split('&')
 let data = {}
 pars.forEach((n, i) => {
 let p = n.split('=')
 data[p[0]] = p[1]
 })
 if (!!data.app3Redirect) {
 self.location = decodeURIComponent(data.app3Redirect)
 }
 
</script>

只需要script标签就可以了,反正只是做重定向。

接下来就简单了,原本设置给微信的分享链接是

shareWxLink = window.location.href

现在我们给他改成

shareWxLink = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href)

这样,我们就把当前页的地址编码后放到参数app3Redirect里面,当访问redirect.html时将自动重定向到解码后的原地址。

到此,终于把这个坑爹的Bug给修复了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue实现阻止浏览器记住密码功能的三种方法

    Vue实现阻止浏览器记住密码功能的三种方法

    本文主要介绍了Vue实现阻止浏览器记住密码功能的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue.js表格组件开发的实例详解

    vue.js表格组件开发的实例详解

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,所以本文将从各方面对Vue.js的组件开发做一个深入介绍。有需要的朋友们可以参考借鉴。
    2016-10-10
  • vuejs移动端实现div拖拽移动

    vuejs移动端实现div拖拽移动

    这篇文章主要为大家详细介绍了vuejs移动端实现div拖拽移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue 修改vant自带的样式过程

    vue 修改vant自带的样式过程

    这篇文章主要介绍了vue 修改vant自带的样式过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js中使用echarts实现数据动态刷新功能

    vue.js中使用echarts实现数据动态刷新功能

    这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下
    2019-04-04
  • VueJS 组件参数名命名与组件属性转化问题

    VueJS 组件参数名命名与组件属性转化问题

    这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue中img的src是动态渲染时不显示的解决

    Vue中img的src是动态渲染时不显示的解决

    今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • axios解决高并发的方法:axios.all()与axios.spread()的操作

    axios解决高并发的方法:axios.all()与axios.spread()的操作

    这篇文章主要介绍了axios解决高并发的方法:axios.all()与axios.spread()的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中$set()的使用方法场景分析

    Vue中$set()的使用方法场景分析

    由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的,这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下
    2023-02-02

最新评论