Vue学习之彻底弄懂一个BUG

2022-06-08 13:47:25 浏览数 (1)

前年的时候,大概花费了半年的光景,使用Python的django web框架配合着django restframework插件作为后端服务

前端使用vue iviews搭建前端框架

也是在那个时候研究了在服务器上部署django应用

我记得是这篇文章

ubuntu18.04系统上用uwsgi nginx部署Django

后端部署在服务器上,前端项目打包然后上传到服务器的宝塔面板中

这是后端的接口:

但是呢,虽然部署了这么长时间,一直有一个bug困扰着我

就是我这个服务器使用ngxin代理的

我们随意点开一个前端页面

可以看到正常的页面

路由地址也正常

接口访问也一切正常

但是会有一个奇怪的bug

让我们在目前的页面点击刷新,就会看到神奇的一个现象:

没错404了

之前因为技术有限,一直没把这个bug当回事,但是最近学习vue的时候,遇到了一个知识点 刚刚好解决了我这个bug

首先这个问题的由来是因为路由的问题

在vue2中,路由分为两种模式

  1. hash

2.history

1. hash支持低版本的浏览器,而history就没有那么友好了

2.(1) hash模式下,它指 # 号之后的所有字符,但是他虽然包含在url中,但是不包含在http请求中。所以改变hash值不会重新加载页面,对传给后端的url没有任何影响,因此不会重新加载页面。它每次改变都会触发hashchange事件,可以通过给window加上hashchange事件进行监听。它是单页面的标配。

(2) history模式,利用了 HTML5 新增的 pushState() 和 replaceState() 方法,在原有的back、forward、go 的基础上,添加对历史记录修改的功能。他虽然改变了url,但是浏览器不会立即向后端发送请求。

3. history模式下有一个问题,就是当页面刷新时,他会实实在在的发送请求,把url给传送过去,因此,如果后端没有做处理的话,就会因找不到资源而报404错误,因此使用history模式时可以跟后端进行配合。

如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

如果真是这样,那我们还真的需要去我们的路由规则里看一下

第106行,我们可以发现。我确实写的是history

当时写博客系统的时候,完全跟着视频里一笔一划的写 其实也不知道一些具体的含义,现在就全都搞懂了,因为开启的是history模式,没有#号,所以每次刷新的时候请求的,会把整个请求地址发过去这样就会导致找不到资源

从而返回404错误

所以困扰了这么久的问题,没想到在一次学习中就解决了

所以,bug是有限的,但是学习是无尽的

无尽的学习可以修补有限个bug

这时想起来一句 温斯顿丘吉尔的一句话:

we shall never surrender

0 人点赞