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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
JavaScript实现通讯录功能
Dec 27 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
星际争霸任务指南——人族
2020/03/04 星际争霸
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python os模块在系统管理中的应用
2020/06/22 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
python如何快速拼接字符串
2020/10/28 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
个人收入证明范本
2015/06/12 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
logback如何自定义日志存储
2021/08/30 Java/Android