vue-router的兩種模式(hash,history)

在說vue路由鈎子函數之前,我先介紹一下路由的兩種模式:

const router = new VueRouter({
 
  　mode: 'history',

  　mode: 'hash',
 
  })

1.hash模式

    hash模式背后的原理是onhashchange事件,可以用window.onhashchange來監聽這個事件,hash模式中的hash值是不會傳到后台的，所以服務器端做一個根地址的映射就可以了。

2.history模式

     history利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。

3.總結

1. hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.abc.com，因此對於后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
2. history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少對 /book/id 的路由處理，將返回 404 錯誤。Vue-Router 官網里如此描述：“不過這種模式要玩好，還需要后台配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。