<代码> vue-router> 哈希代码和<代码> 历史模式,前者为其默认模式,url的表现形式为<代码> http://yoursite.com家里,比较难看。后者的url表现形式为http://yoursite.com/home <代码>
但如果要使用<代码> 历史模式,我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。
我们来看看官方文档是教我们怎么配置的:HTML5历史模式。
首先要将<代码> 模式设置为<代码>历史>
然后设置后端(这里采用的nginx): 然后就……没了!显然官方的教程讲的比较简略,并且我们参照这个教程实际上还是会遇到一些问题。 强烈建议:阅读这部分之前,先看一下nginx的这部分文档和这部分文档。 既然官方文档教我们这样做了,我们就按照它说的来实践一下。 首先,我们将<代码> 模式设置为<代码> 历史,但不配置后端,然后,假如我们的路由是长这个样子的: 我们用nginx部署项目,然后在地址栏输入<代码> http://localhost: 8080> http://localhost: 8080/家> 看起来一切正常,<强>似乎强路由也可以正常切换而不会发生其他问题(实际上会发生问题,后面会进行讨论)。看起来好像不需要按官网告诉我们的那样配置后端也能实现历史<代码> 模式,但如果你直接在地址栏输入<代码> http://localhost: 8080/家>
那么<代码> http://localhost: 8080> http://localhost: 8080 时,静态服务器(这里是nginx)会默认去目标目录(这里为<代码> 中位置<代码>根> 索引。> vue-router 进行转发,自然可以(部分)正常显示。 但如果直接访问<代码> http://localhost: 8080/家> 文件,目标目录下有这个文件吗?没有!所以自然就404了。 为了达到直接访问<代码> http://localhost: 8080/家>
首先想,想要怎样才能达到这个目的呢? 在传统的哈希代码模式中(<代码> http://localhost: 8080 #家> 索引。> vue-router> #>
类比一下,在<代码> 历史模式中,我们所想要的情况就是:输入<代码> http://localhost: 8080/家> 索引。> vue-router> 作为参数,对前端页面进行变换。那么在nginx中,谁能做到这件事呢?答案就是<代码> try_files>
首先看一下try_files的语法:<强> try_files 文件…uri , 然后看一下官方文档对它的介绍: 大意就是它会按照<代码> try_files> 根> 指数> Vue路由器历史模式的配置方法及其原理
