vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决


Posted in Javascript onSeptember 28, 2020

在路由配置中,设置重定向后,浏览器打开是空白没有内容,这里首先确保你的结构没有写错,然后查看单词是否拼错误,一般情况是因为单词拼写错误。

vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

修改后,跳转成功:

vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

附录:VUE通过后端重定向到VUE的页面后,前端路由失效的解决方案

这个问题是我在做微信授权登录的时候遇到的。

具体描述:

用户打开页面后,路由拦截判断用户是否登录,如果未登录,则将用户的访问地址记录到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中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决的文章就介绍到这了,更多相关vue重定向redirect内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
很可爱的输入框
Aug 03 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
angular.js分页代码的实例
Jul 27 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
Openlayers绘制聚合标注
Sep 28 #Javascript
Openlayers绘制地图标注
Sep 28 #Javascript
Openlayers实现图形绘制
Sep 28 #Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 #Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
python 编写简单网页服务器的实例
2018/06/01 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python分数表示方式和写法
2019/06/26 Python
利用Python检测URL状态
2019/07/31 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
详解python如何引用包package
2020/06/07 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
工作表扬信范文
2015/01/17 职场文书
初中体育教学随笔
2015/08/15 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang