# Vue - Vue Router - Hash Mode & History Mode

## Hash Mode：

### 語法：

import { createRouter, createWebHashHistory } from 'vue-router'  

const router = createRouter({
    history: createWebHashHistory(),
    routes: [ 
        //... 
    ]
})

- createWebHashHistory( ) 預設的路徑為 location.pathname 或 / 根目錄

    https://example.com/#

- 若想修改預設的路徑，createWebHashHistory( '/folder/' )

    https://example.com/folder/#

### 特性：

>[How to Parse URL in JavaScript: hostname, pathname, query, has](https://dmitripavlutin.com/parse-url-javascript/)

1. hash：即 URL 中的 # 符號，後面接的是這個網頁的某個位節點(DOM tree的節點)

    https://example.com/#/home

2. 只有 # 符號之前的內容會被包含在 HTTP 請求中
:::danger
意思就是 hash mode 不會把 # 後面那串通過 URL 向後端發起 HTTP 請求
:::
4. 若改變 # 後面的文字(修改hash的部分)，會**增加瀏覽記錄**在瀏覽歷史裡，且**不會讓整個網頁重整或重新讀取**，並且還是可以使用「上一頁」或「下一頁」來切換瀏覽記錄(切換紀錄中不同的 # 位置)

### 原理
- 使用 **location.hash** 和 **onhashchange** 事件
- 會記錄在瀏覽器的 **session history** 中
- **session history** 指的是當前分頁曾經造訪過的頁面
- 實現 **SPA**
- 錨點 # 代表網頁中的位置
- **# 主要是瀏覽器的動作，對伺服器端(server-side)沒有作用**
- 傳送給 HTTP 請求的 URL 中，# 後面的網址是不會被傳送的
- 缺陷是只能改變 # 後面的值
- 支援的瀏覽器較多

## History Mode：

### 語法：

import { createRouter, createWebHistory } from 'vue-router'  

const router = createRouter({
    history: createWebHistory (),
    routes: [ 
        //... 
    ]
})

- createWebHistory ( ) 預設的路徑為 location.pathname 或 / 根目錄

    https://example.com/

- 若想修改預設的路徑，createWebHistory ( '/folder/' )

    https://example.com/folder/

### 特性：

1. 以 HTML5 所提供的 History API 為基礎

- 可以透過 pushState() 、 replaceState() 更新 URL
- 可以透過 history.go() 、 history.back() 、 history.forward() 來指定頁面的路徑切換
- 提供 **state** 物件來讓開發者**暫存與讀取每一頁的狀態**

|History API |Vue |
|---------------- |-------------- |
|pushState() |$router.push |
|replaceState() |$router.replace|
|history.go() |$router.go |
|history.back() |$router.back |
|history.forward()|$router.forward|

2. 前端的 URL 必須和實際向後端發起請求的 URL 一致，否則重新整理網頁後，將返回 HTTP 404

### 原理
- 主要依靠的是 HTML5 新增的 `history.pushState()`
- 可以增加新的 **session history**
- 網址也不會經由 HTTP 請求傳到後端
- 實現 **SPA**
- 必須確認**後端**有相對應的配置
- 如果沒有後端的配置，使用者直接輸入網址，會被導到 404 error 頁面
- 需在後端的配置必須加上「如果URL匹配不到靜態資源，就全都導到index頁面」的程式

<br><br><br><br><br>
參考如下：
> [Vue Router 路由設定](https://book.vue.tw/CH4/4-2-route-settings.html)

重讀並做修改：
>[<被考倒系列QQ>Vue-Router的hash和history mode](https://medium.com/%E6%8B%89%E6%8B%89%E7%9A%84%E7%A8%8B%E5%BC%8F%E7%AD%86%E8%A8%98/vue-router-hash-history-mode-d02175eb0d7c)

###### tags: `Vue`