前端路由的兩種模式-----Hash模式 ，History模式

⭐ 前言

1、前端路由是什麼？

前端路由是在保證只有一個HTML頁面的狀況下，經過對每一個視圖展現形式匹配一個特殊的url來實現所謂的切換效果。不會從新向服務端發送請求，也不會跳轉頁面。不管是刷新、前進、仍是後退，均可以經過特殊url實現。

---

1-1 SPA

單頁web應用（single page web application，SPA）

它只有一個HTML頁面。它的核心是更新視圖不須要從新請求頁面。 所謂的頁面跳轉，多個頁面之間的切換是利用JS動態的變換HTML的內容，加載的時候不是加載整個頁面，而是某個指定的容器中的內容。

舉栗子：阿呆有一個水壺，剛開始裝的是牛奶，過一下子裝的是果汁，再過一會又是開水。可水壺仍是一個水壺!

SPA的缺點：

一、沒法記住用戶的操做記錄，

二、且只有一個url，對SEO不友好。

---

🍓前端路由的重要的做用

一、能夠在改變url的時候不會向服務器發送請求。

二、能夠監聽到url的改變。

2、正式開始吧

2-1 hash模式

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    },
    {
      path: '/search',
      name: 'Search',
      component: Search
    }
  ]
})

複製代碼

--hash模式下的url

http://localhost:8080/#/
 http://localhost:8080/#/detail/1
複製代碼

這裏的 hash 就是指 url 後的 # 號以及後面的字符。好比說 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是咱們指望的 hash 值。 hash 值的變化不會致使瀏覽器像服務器發送請求，並且hash 的改變會觸發 hashChange 事件，瀏覽器的前進後退也能對其進行控制，因此在 H5 的 history 模式出現以前，基本都是使用 hash 模式來實現前端路由。

2-2 history模式

如下是我我的項目中的頁面跳轉 history模式

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: ()=>import('./views/Login.vue'),
    },
    {
      path: '/register',
      name: 'register',
      component: ()=>import('./views/Register.vue'),
    },
    {
      path: '/information',
      name: 'information',
      component: ()=>import('./views/Information.vue'),
    },
    {
      path: '/chat',
      name: 'chat',
      component: ()=>import('./views/ChatView.vue'),
    }
  ]
});
複製代碼

login

concacts

在 HTML5 以前，瀏覽器就已經有了 history 對象。但在早期的 history 中只能用於多頁面的跳轉。

重要）在 HTML5 的規範中，history 新增瞭如下幾個 API：

history.pushState(); // 添加新的狀態到歷史狀態棧

history.replaceState(); // 用新的狀態代替當前狀態

history.state // 返回當前狀態對象

history.pushState() 和 history.replaceState() 的區別?

history.pushState() 在保留現有歷史記錄的同時，將 url 加入到歷史記錄中。 history.replaceState() 會將歷史記錄中的當前頁面歷史替換爲 url。 因爲 history.pushState() 和 history.replaceState() 能夠改變 url 同時，不會刷新頁面，因此在 HTML5 中的 histroy 具有了實現前端路由的能力。

但須要注意的是，history 在修改 url 後，雖然頁面並不會刷新，但咱們在手動刷新，或經過 url 直接進入應用的時候， 服務端是沒法識別這個 url 的。

由於咱們是單頁應用，只有一個 html 文件，服務端在處理其餘路徑的 url 的時候，就會出現404的狀況。 因此，若是要應用 history 模式，須要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回單頁應用的 html 文件。

popstate

在history模式中與hash模式的hashchange對應的是popState。popstate是在瀏覽器回退前進或者js的 back() go() forward()方法的時候纔會觸發。

<button @click="$router.go(-1)">返回</button> //返回上一級

<button @click="$router.back()">返回</button> //返回上一級

<button @click="$router.forward()">返回</button> //切換到下一級

那麼你們就會有疑問——若是隻能經過js的api才能夠觸發popState, 那pushState和replaceState怎麼被popState「注意」到?

答案：能夠經過a標籤改變url，檢測到url發生改變。 大體大代碼以下：

⭐ 總結：

hash模式和history模式對比

一、hash 模式相比於 history 模式的優勢：

1. 兼容性更好，能夠兼容到IE8
2. 無需服務端配合處理非單頁的url地址

二、hash 模式相比於 history 模式的缺點：

1. 看起來更醜。
2. 會致使錨點功能失效。
3. 相同 hash 值不會觸發動做將記錄加入到歷史棧中，而 pushState 則能夠。