hash模式的url和history模式url比较如下:
hash:http://host:port/context/#/path
history: http://host:port/context/path
hash模式在后端返回前端重定向具体url时会导致#后的路径丢失,存在导致重定向不准的情况。相对而言,history模式不会有这种问题。
但是history也有相应的问题,通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。 在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来,所以两种方式的使用要注意使用场景,同时对于代理注意做好相关配置。
这两种模式针对nginx的代理配置也会有比较大的区别,分别如下:
hash模式:
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
history模式:
location / {
try_files $uri $uri/ /index.html;
root /data/www;
}
注意:如果是基于history模式,前端有应用上下文,那么try_files配置需要代码上下问的配置,如下:
location /xg/ {
root /data/www/;
#index index.html index.htm;
try_files $uri $uri/ /xg/index.html;
}
nginx
于 2022-03-15 17:56:41 首次发布