解决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 相关文章推荐
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
js操作iframe父子窗体示例
May 22 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
js实现自定义滚动条的示例
Oct 27 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编程网上资源导航
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
使用Python进行目录的对比方法
2018/11/01 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
房地产融资计划书
2014/01/10 职场文书
一名老师的自我评价
2014/02/07 职场文书
2016年母亲节广告语
2016/01/28 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
python实现过滤敏感词
2021/05/08 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android