解决vue router使用 history 模式刷新后404问题


Posted in Javascript onJuly 19, 2017

因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误。

想要history模式正常访问,还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

也就是在服务端修改404错误页面的配置路径,让其指向到index.html。

警告:

因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
 mode: 'history',
 routes: [
 { path: '*', component: NotFoundComponent }
 ]
})

如此便解决了页面刷新后404问题。

问题延伸:

但是后面又发现,在IE浏览器下刷新仍然还是404,在网上找了一下原因,是因为IE自作聪明,对错误页面的处理在ie来看页面大小<1024b 会被认为十分不友好,所以ie就将改页面给替换成自己的错误提示页面了,而我的index.html刚好只有一个DIV:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-mdm</title>
</head>
<body>
<div id="app"></div>
</div>
</body>
</html>

解决办法就是充实一下页面,让大小超过1024即可。

总结

以上所述是小编给大家介绍的解决vue router使用 history 模式刷新后404问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
深入理解vue Render函数
Jul 19 #Javascript
Vue AST源码解析第一篇
Jul 19 #Javascript
Vue之Watcher源码解析(1)
Jul 19 #Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 #Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 #Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 #Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
You might like
生成缩略图
2006/10/09 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
零基础php编程好学吗
2019/10/11 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js中生成map对象的方法
2014/01/09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
Element Input组件分析小结
2018/10/11 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python实现电子产品商店
2019/02/26 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
探亲邀请信范文
2014/01/30 职场文书
2014年三万活动总结
2014/04/26 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
关于Python中进度条的六个实用技巧分享
2022/04/05 Python