hash模式和history模式的差異是什麼?
拿這個地址為例:
http://xxx.com#about
http://xxx.com/about
hash模式
由於http請求並不包含hash,所以不管hash值為多少,服務器端收到的請求始終都是/。
history模式
history模式下,後面的/about路徑會被服務器接收到,然後嘗試去處理這個/about。
為什麼hash模式不用配置,history模式卻要?
這是因為hash模式的路由path值並不會傳遞給後端,所以你的任意path,對後端來説都不可見,它只會認為你在訪問根目錄的index.html。
而history模式的路由path會傳遞到後端,後端會嘗試把前端路由當成後端路由來處理,也就會造成非預期的結果。
ps:這也是為什麼在history模式下,只要你在根路由不切換路由到其他路由,再怎麼刷新也是可以正常使用的原因,因為根路由沒有額外的路由path傳遞給後端去解析。
怎麼解決?
其實和hash模式的原理是相通的,hash模式時,路由默認就不會被傳遞到後端,但是history模式會,那麼在history模式下,我們只需要按照這個思路,將前端傳來的路由忽略掉就行了。
下面這段nginx配置就是起到這樣的作用,對那些後端不存在的請求的路由請求,直接返回index.html。這樣就可以讓前端接管路由了。
location / {
# 表示首先嚐試以文件形式提供請求的內容
# 然後以目錄形式提供
# 最後如果都失敗則返回 index.html 頁面
try_files $uri $uri/ /index.html;
}
nginx如何配置子應用?
3個目標應用
# 主應用
http://xxx.com/
# 子引用1
http://xxx.com/child-project1
# 子引用2
http://xxx.com/child-project2
對應的nginx配置:
# 主應用
location / {
try_files $uri $uri/ /index.html;
}
# 子應用1
location /child-project1 {
try_files $uri $uri/ /child-project1/index.html;
}
# 子應用2
location /child-project2 {
try_files $uri $uri/ /child-project2/index.html;
}