關于路由hash與History的設置

1、history 關鍵字：createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
const routes = [ {
? path: '/userinfo',
? name: 'UserInfo',
? component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
? history: createWebHistory(process.env.BASE_URL),
? routes
})
export default router

2、hash 關鍵字：createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
? path: '/userinfo',
? name: 'UserInfo',
? component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
? history: createWebHashHistory(),
? routes
})
export default router

路由中hash和history模式區(qū)別

Vue-Router有兩種模式：hash模式和history模式。默認的路由模式是hash模式。

1、hash模式

hash模式是開發(fā)中默認的模式，也稱作錨點，它的URL帶著一個#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特點：

hash值會出現(xiàn)在URL里面，但是不會出現(xiàn)在HTTP請求中，對后端沒有影響。所以改變hash值不會重新加載頁面。

這種模式的瀏覽器支持度很好，低版本的IE瀏覽器也支持這種模式。

hash路由被稱為是前端路由，已經(jīng)成為SPA（單頁面應用）的標配。

原理：

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
?? ?console.log(event.oldURL, event.newURL);
?? ?let hash = location.hash.slice(1);
}

使用onhashchange()事件的好處就是，在頁面的hash值發(fā)生變化時，無需向后端發(fā)起請求，window就可以監(jiān)聽事件的改變，并按規(guī)則加載相應的代碼。除此之外，hash值變化對應的URL都會被瀏覽器記錄下來，這樣瀏覽器就能實現(xiàn)頁面的前進和后退。雖然是沒有請求后端服務器，但是頁面的hash值和對應的URL關聯(lián)起來了。

獲取頁面hash變化的方法：

（1）監(jiān)聽$route的變化：

// 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
watch: {
? $route: {
? ? handler: function(val, oldVal){
? ? ? console.log(val);
? ? },
? ? // 深度觀察監(jiān)聽
? ? deep: true
? }
},

（2）通過window.location.hash讀取#值：

window.location.hash 的值可讀可寫，讀取來判斷狀態(tài)是否改變，寫入時可以在不重載網(wǎng)頁的前提下，添加一條歷史訪問記錄。

2、history模式

history模式直接指向history對象，它表示當前窗口的瀏覽歷史，history對象保存了當前窗口訪問過的所有頁面網(wǎng)址。URL中沒有#，它使用的是傳統(tǒng)的路由分發(fā)模式，即用戶在輸入一個URL時，服務器會接收這個請求，并解析這個URL，然后做出相應的邏輯處理。

特點：

當使用history模式時，URL就像這樣：hhh.com/user/id。相比hash模式更加好看。

雖然history模式不需要#。但是，它也有自己的缺點，就是在刷新頁面的時候，如果沒有相應的路由或資源，就會刷出404來。

history api可以分為兩大部分，切換歷史狀態(tài) 和 修改歷史狀態(tài)：

修改歷史狀態(tài)：

包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，這兩個方法應用于瀏覽器的歷史記錄棧，提供了對歷史記錄進行修改的功能。只是當他們進行修改時，雖然修改了url，但瀏覽器不會立即向后端發(fā)送請求。如果要做到改變url但又不刷新頁面的效果，就需要前端用上這兩個API。

切換歷史狀態(tài)：

包括forward()、back()、go()三個方法，對應瀏覽器的前進，后退，跳轉(zhuǎn)操作。

配置：

想要設置成history模式，就要進行以下的配置（后端也要進行配置）：

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

3、兩者對比

調(diào)用 history.pushState() 相比于直接修改 hash，存在以下優(yōu)勢:

pushState() 設置的新 URL 可以是與當前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設置與當前 URL 同文檔的 URL。

pushState() 設置的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設置的新值必須與原來不一樣才會觸發(fā)動作將記錄添加到棧中。

pushState() 通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串。

pushState() 可額外設置 title 屬性供后續(xù)使用。

hash模式下，僅hash符號之前的url會被包含在請求中，后端如果沒有做到對路由的全覆蓋，也不會返回404錯誤；history模式下，前端的url必須和實際向后端發(fā)起請求的url一致，如果沒有對用的路由處理，將返回404錯誤。

小結：

hash模式URL上帶有#，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 www.hhh.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

hash模式URL上沒有#，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 www.hhh.com/user/id。如果后端缺少對 /use/id 的路由處理，將返回 404 錯誤。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論