vue路由hash模式（带#）微信公众号首次授权后ios总是跳首页的问题

最新推荐文章于 2024-07-28 11:27:08 发布

z.week

最新推荐文章于 2024-07-28 11:27:08 发布

阅读量2.4k

点赞数 3

分类专栏： h5 vue 公众号

本文链接：https://blog.csdn.net/weixin_45295253/article/details/102958592

版权

vue 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

公众号

6 篇文章 0 订阅

订阅专栏

ios系统url上#后面的信息不会解析，会被忽略掉
比如url：www.demo.com/dist/index.html#/detail?id=10
直解析到www.demo.com/dist/index.html，所以跳转到首页
解决方案：在index页面添加如下代码

    beforeCreate() {
        window.location.href = window.location.href.split('#')[0] + '#' + this.$route.fullPath
    },

亲测有效，可以解决点击分享出去的链接总是跳首页、首次授权会跳首页的问题

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

z.week

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于vue hash模式微信分享#号的解决

10-14

总结，解决Vue Hash模式下微信分享`#`号问题的核心在于正确配置微信JSSDK，并在分享链接中手动拼接`#`号及其后的路由信息。同时，对于微信内视频播放的优化，可以通过调整特定属性来改善用户体验。理解并掌握这些...

vue href跳转_配合Thinkphp，让Vue完美支持微信授权，走出开发大坑

weixin_30380991的博客

01-24

245

冰河这几天刚接手一个移动端项目，因为项目时间充足，而且也没有SEO的要求，就想用vant来开发，因为程序需要设置微信公众号支付，而且还有获取微信用户信息，那么就避免不了奖Vue+php连接起来。我的思路是：在localStorage中加入一个项wxcode，初始是没有的，这一项是通过php回传后加入的，然后路由中判断localStorage是否存在wxcode，没有的话就跳转到php进行授权获取，...

参与评论您还未登录，请先登录后发表或查看评论

补充：（方案二）vue路由hash模式（带#）微信公众号首次授权后ios总是跳首页的问题

Z.Dragon 的博客

02-25

1175

解决方案一请看我另一篇文章方案一利用 .html 文件作为中转页面进行路由重定向该页面在 static 文件夹下（vue打包时不会被编译），并只做 js 处理：截取参数解码——> 跳转页面 <script> let url = location.href.split('?') let pars = url[1].split('&') let data = {} pars.forEach((n, i) => { let p =

VUE与微信公众号的一些事

最新发布

07-28

292

router.beforeEach((to, from, next) => {} 中转换处理过的URL。调试测试正常，但是发布到IIS7.0 则不会触发跳转，无奈使用History模式。如果不使用url_write页面不能正常跳转。添加Web.config，内容如下。3、router中增加。的public文件下。

总结：vue路由跳转带参数传递的三种常用方式

qq_43119205的博客

04-16

535

1.使用</router-link>标签跳转 //从首页跳转 <router-link tag="span" :to="{path:'/loginRegister',query:{type:1}}" class="login">登录</router-link> <router-link tag="span" :to="{path:'/loginRegist...

去除Vue访问链接含有#号解决方案

runwuwushengxiyu的博客

06-08

423

去除Vue访问链接含有#号解决方案

解决vue路径中#号

dianwan5205的博客

01-16

1165

在router文件夹下的js文件中，更改配置增加 mode: 'history'; vue-router官方文档：https://router.vuejs.org/zh-cn/essentials/history-mode.html 转载于:https://www.cnblogs.com/jiayeyuan/p/8296708.html...

Vue URL哈希模式下参数拼接在#前面问题

ddd

08-04

4608

问题发现是在做授权时给后端一个回调地址，当回来就发现参数拼在#前面导致取不到query值。使用 earchParams.get() 取值如果没有该参数返回值为 null。使用new URL()后得到以下信息对地址重新拼接后改变url。别使用哈希模式，改为历史模式，接下来的事交给后端解决吧。这条博客是有关this.$route.query取不到值...

微信公众号对接：vue前端hash模式下跳转到微信授权页面获取code，微信回调页面返回参数位置有问题，code返回值拼接到了#之前，已解决

Zh.快乐的程序猿的博客

01-26

1691

微信公众号对接：vue前端hash模式下跳转到微信授权页面获取code，微信回调页面返回参数位置有问题，code返回值拼接到了#之前，已解决

使用vue完成微信公众号网页小记(推荐)

11-26

公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是...

vue微信公众号授权插件

08-12

vue微信公众号授权插件

vue项目使用微信公众号支付总结及遇到的坑

12-09

微信公众号支付 1. 使用jssdk调用微信支付，具体查看开发文档；使用的vuex，在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx....

微信公众号网站使用vue获取用户openid等信息

05-11

开发微信公众号时通过vue页面获取用户静默授权/非静默授权后的信息，整个一套代码全部嵌套在vue界面中。

springboot+vue微信公众号实现网上商城前后端分离项目（包含数据库脚本文件）.zip

06-02

springboot+vue微信公众号实现网上商城前后端分离项目（包含数据库脚本文件）

使用短网址重定向自己的长链接时，在ios浏览器或者微信下重写向到带#的链接会被截断#后的字符串

atzqtzq的博客

12-03

1039

以为是uniapp生成的路由模式问题实际上是后一个网站未设置https，url链接中却带了#号，在ios下打开会截断。

解决vue路由hash模式下,微信网页授权问题

T1058253468的博客

10-23

7274

解决vue路由hash模式下,微信网页授权问题本人开发负责微信公众号端,菜单都是自定义菜单,然后每个菜单路径都是经过授权如:http://xxxx.com/ceshi/wechat/authorize?returnUrl=http://xxxx.com/charge/#/setParameters 经过后台授权后返回给前端页面拼接当前用户的openid http://xxxx.com/char...

vue 调用共众url_vue+微信公众号开发网页授权返回url路径中带#不识别，无法授权解决方案...

weixin_35110266的博客

12-23

1927

带个#可真是坑啊！！！第一次开发微信公众号，原本看起来并不复杂，前端负责调接微信接口的地方很少，为了安全起见，大部分接口都是由后端处理，前端只需负责调通后端接口即可，当然还有少部分需要前端来处理。在微信公众号开发中，网页授权第一步需要用户同意授权，获取code ，微信官方提供的获取code接口如下(具体接口介绍请查看微信开发者文档)https://open.weixin.qq.com/conne...

vue 集成微信公众号 网页授权 #

09-03

Vue 集成微信公众号网页授权需要经过以下步骤：第一步，注册微信公众号，登录微信公众平台，进入开发者中心，获取 AppID 和 AppSecret。第二步，创建一个 Vue 项目，在项目中安装并引入 axios 库，用于发送网络请求。使用 npm 或 yarn 安装 axios，然后在需要使用的地方引入。第三步，通过后台服务器获取微信授权的 access_token。在后台服务器中，使用 Axios 发送 GET 请求到微信接口地址，携带 AppID、AppSecret 和 code 参数，获取 access_token。第四步，将获取到的 access_token 返回给前端 Vue 项目。使用 Axios 发送 POST 请求，将 access_token 发送到后台服务器，将结果返回给前端。第五步，在前端 Vue 项目中调用微信授权接口。在 Vue 组件的钩子函数中，使用 Axios 发送 GET 请求到微信授权接口，携带 access_token 和 openid 参数，获取用户信息。第六步，将获取到的用户信息展示给用户。在 Vue 组件中，使用数据绑定把用户信息展示给用户。通过以上步骤，我们就可以实现在 Vue 中集成微信公众号网页授权功能。需要注意的是，其中涉及到微信的敏感信息，需要保护好用户的隐私安全。