目錄

• 前置知識(shí)
• Nginx
• location
• 常用匹配規(guī)則
• root 與 alias
• 解決刷新后出現(xiàn)404的問(wèn)題
• 總結(jié)

前置知識(shí)

• 單頁(yè)應(yīng)用(SPA - single page application)
  只在第一次加載頁(yè)面時(shí)，返回唯一的html頁(yè)面和它的公共靜態(tài)資源，后續(xù)的頁(yè)面跳轉(zhuǎn)都不會(huì)從服務(wù)端拿html文件。（hash和history路由實(shí)現(xiàn)瀏覽器url變化而不刷新頁(yè)面）
• hash路由
  例子：www.baidu.com/#/home, 原本hash是用來(lái)結(jié)合錨點(diǎn)實(shí)現(xiàn)頁(yè)面試圖的控制，當(dāng)#后面的值發(fā)生改變時(shí)不會(huì)重新請(qǐng)求頁(yè)面，主要通過(guò)window的onhashchange方法來(lái)實(shí)現(xiàn)。
• history路由
  相比于hash路由，最直觀的變化就是路由中沒(méi)有#，通過(guò)調(diào)用window.history對(duì)象上的一系列方法來(lái)實(shí)現(xiàn)頁(yè)面的無(wú)刷新跳轉(zhuǎn)（pushState、replaceState）。

history模式下，因?yàn)閡rl改變了，此時(shí)如果手動(dòng)刷新頁(yè)面，瀏覽器認(rèn)為是請(qǐng)求一個(gè)新的頁(yè)面（發(fā)起新的Http請(qǐng)求），而新的頁(yè)面是不存在的（后端未配置的話），導(dǎo)致404。

先簡(jiǎn)述一下在瀏覽器上輸入IP或域名后發(fā)生的事情（有點(diǎn)面試題的味道了嗷