vue页面刷新报错Cannot GET /...,控制台报错404:GET http://localhost:8080/... 404 (Not Found)

目录

遇到的问题

解决方法

拓展:hash与history区别


遇到的问题

一开始vue页面访问正常,一刷新报如下错误:

控制台报错:

vue页面刷新报错Cannot GET /...,控制台报错404:GET http://localhost:8080/... 404 (Not Found)_第1张图片

页面报错:

解决方法

在配置路由的文件中(本人是src/router/index.js文件),将vue路由模式mode: 'history' 修改为

mode: 'hash'

vue页面刷新报错Cannot GET /...,控制台报错404:GET http://localhost:8080/... 404 (Not Found)_第2张图片

重新运行,问题解决!!!

拓展:hash与history区别

不同之处有三点。

1.原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的,前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录,并更换地址栏地址信息,但是页面不会刷新,需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能。

2.表现不同。
hash模式会在地址栏中有#号,而history模式没有;同时由于history模式的实现原理用到H5的新特性,所以它对浏览器的兼容性有要求(IE >= 10)。

3.history模式特点
history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。处理方式:需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向,重定向到你的首页路由上就OK啦。

你可能感兴趣的:(vue,前端,vue)