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 相关文章推荐
jq选项卡鼠标延迟的插件实例
May 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
ES6关于Promise的用法详解
May 07 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
vue 组件简介
Jul 31 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
keras导入weights方式
2020/06/12 Python
python定时截屏实现
2020/11/02 Python
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
学生档案自我鉴定
2013/10/07 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
物资采购方案
2014/06/12 职场文书
2014年少先队工作总结
2014/12/03 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
Python如何识别银行卡卡号?
2021/06/10 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server