vue-router之hash與history，以及nginx設定

本篇講解前端專案的路由模式（以vue-router為例），以及history模式下的專案部署問題。

vue-router的路由模式可以通過指定mode屬性值控制，可選值："hash" 、"history"、 "abstract" ， 預設："hash" (瀏覽器環境) ， "abstract" (Node.js 環境)

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

路由表裡的兜底設定

hash與history

Hash模式

通過 onhashchange 方法監聽hash的改變來實現

• Hash模式是基於錨點，以及onhashchange事件
• URL中#後面的內容作為路徑地址
• 監聽hashchange事件
• 根據當前路由地址找到對應元件重新渲染

History模式

通過 onpopstate 方法監聽history的改變來實現

• History模式是基於HTML5中的History API
• 通過history.pushState()方法改變位址列 IE 10 以後才支援
• 監聽popstate事件
• history.replaceState()
• 根據當前路由地址找到對應元件重新渲染

History模式的使用，以及nginx設定

• History 需要伺服器的支援
• 單頁應用中，伺服器端不存在http://www.testurl.com/login這樣的地址，會返回找不到該頁面
• 在伺服器端應該除了靜態資源外都返回單頁應用的index.html，比如：http://www.testurl.com/login.html

history需要伺服器支援，我們使用node或nginx
http://localhost:8080/main/home

nginx處理方式

在nginx的html根目錄部署一個專案，然後新開一個資料夾，部署另一個專案，nginx.conf

location / {
  root    html;
  index   index.html index.htm;
  try_files $uri $uri/ /index.html
}

try_files：

• $uri: 當前請求路由
  這句話意思是嘗試請求當前路由，如果請求不到，就返回當前目錄下的index.html

nginx root 和 alias 的區別

location  /i/ {
 alias   /spool/w3/images/;
}
#