【VUE】通过后端重定向到VUE的页面后,前端路由失效的解决方案!
2018-06-21 16:54
2181 查看
版权声明:本文由博主原创所有,转载请注明出处 https://blog.csdn.net/qq449736038/article/details/80762606
这个问题是我在做微信授权登录的时候遇到的。
具体描述:
用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到localStorage里面,等待授权后重定向到该页面。
当我使用location.href将页面跳转到后端地址,进行微信用户信息获取完成,由php后端通过header将页面重定向到我http://my.app.com/#/login 页面时,发现似乎并没有路由到login页面,而是卡在了 #/ 默认路由。在微信浏览器中将页面地址复制出来,发现确实是丢失了#后面的部分。
经过一系列的思考,怀疑是浏览器缓存的原因,php后端通过header()函数跳转时,加上随机数字,防止浏览器使用缓存。即:
header("Location:http://my.app.com/?".time()."#/login"),在url中加上时间戳,防止浏览器使用缓存是一种很常见的做法。
这个问题的原因我猜想可能是一开始浏览器访问了http://my.app.com/。而之后重定向的http://my.app.com/#/login只是多了#号后的部分,传统页面中#被作为锚点使用,所以浏览器认为你访问了2个一模一样的页面,所以使用了缓存。
这个问题并不是在所有手机上都有的,部分手机才会出现这个问题,不过加上随机数之后,问题完美解决!
阅读更多相关文章推荐
- 基于vue-cli的vue项目之路由6--重定向2-----页面初始化重定向
- shiro框架前端ajax无法重定向到登录页面解决方案
- vue,vuex的后台管理项目架子structure-admin,后端服务nodejs,前端vue页面
- Vue 2.0 页面刚启动时如何做路由的重定向?
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- vue.js通过路由跳转页面的三种方式
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue通过路由实现页面刷新的方法
- 通过页面静态化促进后端逻辑的可重用性
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
- 前端路由与后端路由
- webpack4打包vue前端多页面项目
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- Vue路由History mode模式中页面无法渲染的原因及解决
- Vue 通过下表修改数组,页面不渲染问题
- asp.net mvc 通过修改路由规则来实现页面的URL多参数传递
- 前端框架Vue(2)——Vue-Router 路由跳转
- 使用vue.js路由后失效
- Vue——Vue-cli脚手架+前端路由
- 通过java后台拼接json字符串修改页面样式----一页多用 + 双引号(")和单引号(')截断字符串解决方案