解决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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
javascript 闭包疑问
Dec 30 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
跟混乱的页面弹窗说再见
Apr 11 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
透析PHP的配置文件php.ini
2006/10/09 PHP
php分页示例代码
2007/03/19 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python中函数传参详解
2016/07/03 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
pytorch标签转onehot形式实例
2020/01/02 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
年会活动策划方案
2014/01/23 职场文书
财务部经理岗位职责
2014/02/03 职场文书
中式结婚主持词
2014/03/14 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2015年质检工作总结
2015/05/04 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书