解决vue router使用 history 模式刷新后404问题
更新时间：2017年07月19日 14:42:44 作者：limmy_sz
这篇文章主要介绍了解决vue router使用 history 模式刷新后404问题,需要的朋友可以参考下
因为我们的应用是单页客户端应用，当使用 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问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-06-06
今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue使用Element组件时v-for循环里的表单项验证方法
这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue.js 加入高德地图的实现方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现移动端多格输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
从零开始学Vue，通过一些例子，让大家概览一些基本的概念和特性，理解Vue的基础知识,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
vue3深入学习 nextTick和historyApiFallback
这篇文章主要介绍了vue3深入学习 nextTick和historyApiFallback，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了Vue获取页面元素的相对位置的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue实现内部组件轮播切换效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue页面切换项目实现转场动画的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论