Vue Router history模式的配置方法及其原理
转载地址:https://segmentfault.com/a/1190000019391139
vue-router
分为hash
和history
模式,前者为其默认模式,url的表现形式为http://yoursite.com#home
,比较难看。后者的url表现形式为http://yoursite.com/home
,比较美观。
但如果要使用history
模式,我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。
history
模式的配置方法
我们来看看官方文档是教我们怎么配置的:HTML5 History 模式。
首先要将mode
设置为history
:
const router = new VueRouter({mode: 'history',routes: [...]
})
然后设置后端(这里采用的nginx):
location / {try_files $uri $uri/ /index.html;
}
然后就......没了!显然官方的教程讲的比较简略,并且我们参照这个教程实际上还是会遇到一些问题。
history
模式的配置实践及原理
强烈建议:阅读这部分之前,先看一下nginx的这部分文档和这部分文档。
既然官方文档教我们这样做了,我们就按照它说的来实践一下。
只配置前端的情况
首先,我们将mode
设置为history
,但不配置后端。然后,假如我们的路由是长这个样子的:
const routes = [{path: '/home', component: Home},{path: '/', redirect: '/home'}
];
我们用nginx部署项目,然后在地址栏输入http://localhost:8080
(这里配置的端口是8080),你会发现地址栏之后会变为http://localhost:8080/home
,并且看起来一切正常,似乎路由也可以正常切换而不会发生其他问题(实际上会发生问题,后面会进行讨论)。看起来好像不需要按官网告诉我们的那样配置后端也能实现history
模式,但如果你直接在地址栏输入http://localhost:8080/home
,你会发现你获得了一个404页面。
那么http://localhost:8080
为什么可以(部分)正常显示呢?道理其实很简单,你访问http://localhost:8080
时,静态服务器(这里是nginx)会默认去目标目录(这里为location
中root
所指定的目录)下寻找index.html
(这是nginx在端口后没有额外路径时的默认行为),目标目录下有这个文件吗?有!然后静态服务器返回给你这个文件,配合vue-router
进行转发,自然可以(部分)正常显示。
但如果直接访问http://localhost:8080/home
,静态服务器会去目标目录下寻找home
文件,目标目录下有这个文件吗?没有!所以自然就404了。
配置后端
为了达到直接访问http://localhost:8080/home
也可以成功的目的,我们需要对后端(这里即nginx)进行一些配置。
首先想想,要怎样才能达到这个目的呢?
在传统的hash
模式中(http://localhost:8080#home
),即使不需要配置,静态服务器始终会去寻找index.html
并返回给我们,然后vue-router
会获取#
后面的字符作为参数,对前端页面进行变换。
类比一下,在history
模式中,我们所想要的情况就是:输入http://localhost:8080/home
,但最终返回的也是index.html
,然后vue-router
会获取home
作为参数,对前端页面进行变换。那么在nginx中,谁能做到这件事呢?答案就是try_files
。
首先看一下try_files的语法:try_files file ... uri;
然后看一下官方文档对它的介绍:
Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the file parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made.
大意就是它会按照try_files
后面的参数依次去匹配root
中对应的文件或文件夹。如果匹配到的是一个文件,那么将返回这个文件;如果匹配到的是一个文件夹,那么将返回这个文件夹中index
指令指定的文件。最后一个uri
参数将作为前面没有匹配到的fallback。(注意try_files
指令至少需要两个参数)
拿我自己的网站举个例子:
location / { root /data/www/rf-blog-web; index index.html; try_files $uri $uri/ /index.html;
}
$uri
是nginx中的变量,比如我访问的网址是http://localhost:8080/home
,那么它就代表的/home
。
在rf-blog-web
这个目录中,没有子目录,只有一个index.html
和一些压缩后的名称是hash值的.js文件。当我们请求http://localhost:8080/home
这个地址时,首先查找有无home
这个文件,没有;再查找有无home
目录,也没有。所以最终会定位到第三个参数从而返回index.html
,按照这个规则,所有路由里的url路径最后都会定位到index.html
。vue-router
再获取参数进行前端页面的变换,至此,我们已经可以通过http://localhost:8080/home
这个地址进行成功地访问了。
而$uri
这个参数的作用其实是匹配那些.js文件用的,而$uri/
在这个例子中并没有多大用,实际上是可以去掉的。
history
模式下可能会遇到的问题及解决方案
在将我的项目(在路由中用了懒加载)改为history
模式的过程中,有时候发现会出现chunk加载出错的情况,打开chrome的network发现那个chunk加载404了,是因为请求的url中多了一层路径。我在这里发现了解决方案。
LinusBorg说,因为在history
模式中切换路由时,我们是真正改变了页面的url路径,所以webpack的runtime会认为它位于example.com/some/path
。如果publicPath
是设置的相对路径,那么webpack加载chunk时可能会变成example.com/some/path/static/js/3.js
这样的路径,然而chunk的真正路径是example.com/static/js/3.js
,所以我们需要将publicPath
设置为绝对路径(publicPath: '/'
)来解决这个问题。
Vue Router history模式的配置方法及其原理相关推荐
- vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是 ...
- nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数 问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
- vue使用history模式页面空白
之前负责了一个项目,使用的是vue.为了避免在地址链接的时候出现问题后端要求去掉#号,也就是使用history模式. 更改history模式后打包部署后发现页面空白.查询了下官网的文档资料https: ...
- Vue Router路由模式的区别 进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
- 解决Vue的history模式刷新页面出现404的问题
解决Vue的history模式刷新页面出现404的问题 路由的两种工作模式 (一).hash模式 地址中永远带着#号,不美观 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合 ...
- history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...
- Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
最新文章
- 平流式隔油池计算_当隔油池整改工作遇上“露天铁板烧”
- Target runtime Apache Tomcat 6.0 is not defined
- 1089: [SCOI2003]严格n元树
- jQuery笔记之工具方法extend插件扩展
- Java读书笔记(4)-多线程(二)
- ADO.NET2.0的十大新特性
- GPU Gems1 - 12 全方位的阴影映射
- 微服务pact测试框架_消费者驱动的Pact和Spring Boot测试
- JS 计算日期天数差
- LeetCode206:Reverse Linked List
- Spring Data JPA 从入门到精通~@Query详解
- Gartner发布2021年低代码魔力象限,Mendix名列前位
- python 数据变化——n次多项式
- 中公教育python培训讲师面试题_中公教育面试经验
- 泛微E-Office v9任意文件上传(CNVD-2021-49104)复现
- 西班牙国家德比次回合时间确定 中国球迷需熬夜
- 如何快速实现微信账号的注销,福利在这里,怎样快速注销微信账号
- Mtk Camera中Hal1/Hal3的Picture size和Preview size配置
- 如何查看自己电脑的并口端口号?
- 兴趣点推荐代码_如何解读霍兰德职业兴趣测评结果?