在new Router({})配置 mode 引數，mode值可選hash或者History。

hash模式

• hash（#）是URL的錨點，同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”後退”按鈕，就可以回到上一個位置；但不會對服務端請求資料。
• 使用hashchange()監聽hash值變化，使用window.location.href重新賦值。
  • 用法例項

  // 對hash值變化進行監聽
  window.onhashchange = function(e) {
    // 實現頁面顯示隱藏
    switch(e) {
      case e === 'index':
        window.location.href = 'index.html';
        break;
      ...
      default:
        console.log(`Sorry, we are out of ${e}.`);
    }
  }
   
  

History模式

• 使用 HTML5 History 中提供的一種功能，能在不重新整理頁面的情況下修改URL， 使用History.pushState()實現URL跳轉無需重新整理。
  • pushState新建歷史記錄 和replaceState修改歷史記錄 兩個API以及瀏覽器的 popState事件監聽 歷史棧的改變，只要歷史棧有資訊發生改變，就會觸發該事件。這種模式同樣也是不會向後端發起請求的。
  • 用法例項

  // History變化事件監聽
  window.onpopstate = function(e) {
    alert(2);
  }
  
  // 狀態物件
  let stateObj = {
      foo: "bar",
  };
  
  /*
  * @description pushState - 新建歷史記錄 replaceState - 修改歷史記錄
  * @params stateObj {Object} 狀態物件state是一個JavaScript物件
  * @params title {String} 標題
  * @params URL {String} URL地址 新URL必須與當前URL同源
  */
  history.pushState(stateObj, "page 2", "bar.html");
  
  history.replaceState(stateObj, "page 3", "bar2.html");
   
  

  • window.history.forward() == window.history.go(1); -- 前進。
  • window.history.back() == window.history.go(-1)； -- 後退。
• 但當用戶直接在使用者欄輸入地址並帶有引數時：

  • Hash模式：xxx.com/#/id=5 請求地址為 xxx.com，沒有問題。

  • History模式: xxx.com/id=5 請求地址為 xxx.com/id=5，如果後端沒有對應的路由處理，就會返回404錯誤。

  • 前端解決辦法： 在路由攔截（router.beforEach(async(to, from, next)=>{})

    ）裡判斷,如果沒有匹配的路由，跳轉預設的index.html頁面。
    • 有個問題不再返回 404 頁面，所以後端處理比較好。

  • 後端解決辦法：

    • 在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
    • 給個警告，因為這麼做以後，你的伺服器就不再返回 404 錯誤頁面，因為對於所有錯誤路徑都會返回 index.html 檔案。為了避免這種情況，你應該在 Vue 應用裡面覆蓋所有的路由情況，然後再給出一個 404 頁面。或者，如果你使用 Node.js 伺服器，你可以用服務端路由匹配到來的 URL，並在沒有匹配到路由的時候返回 404，以實現回退。