前端實現路由

後端實現的路由本質是通過伺服器**與路徑的配合去訪問伺服器上的靜態資源。

而我們現在的專案都是單頁面，路由控制權都是放在前端了。

前端框架現在都是單頁面模式，了解他們實現的本質變得重中之重。

前端實現路由有兩種方式 hash 與 history

hash原本是作為頁面定位使用，本身會在url後攜帶#，切換路由只改變#後面的值，他不會改變瀏覽器訪問伺服器資源的位址（#前的才會被用在請求中），所以改變hash值就像我們改變url引數一樣不會導致頁面的過載

history路由直接會更改url，沒有任何特殊符號參雜，瀏覽器會識別為訪問伺服器具體的路徑造成訪問404現象，所以我們一般會配置404重定向到index頁面，然後交由index頁面處理

思考：比如history模式上線我們都要配置服務端，請求不到路徑就走404，那每次路由跳轉應該都會404，走服務端的重定向，network裡都會有請求index.html才對,，而實際卻沒有，這是為什麼？

其實無論hash還是history內部都是除了首次載入路由完全脫離了瀏覽器控制，後續的頁面內的路由跳轉事件都是前端處理的，瀏覽器的位址列就相當於改了個樣式，並不會實際傳送請求到後端，也就不會經過**伺服器的的重定向。

框架中就是轉化我們的路由配置，如果是內部跳轉，根據我們跳轉的位址，改變相應的url的顯示，內部監聽這次轉變，對相應模組片段進行載入與解除安裝。如果是重新整理或者瀏覽器回車式載入等，就是訪問伺服器上的index頁面，再根據當前的url載入相應的片段

我們只需要呼叫location.hash就可以設定當前路由的hash值，接下來就是要監聽了，有兩種監聽方式

(_=>)(
)1. window.
onhashchange
=(e)
=>
2. window.
addeventlistener
('hashchange',(
)=>
)

然後就可以在方法中執行頁面的載入解除安裝

history 模式依靠呼叫 history.pushstate 方法以及監聽 popstate 事件

pushstate將url放入歷史記錄，顯示在路由中，replacestate將url替換當前的歷史記錄，都不會向後端發起請求。

pushstate 的時候，並不會觸發 popstate 事件, popstate只會監聽前進後退時候的變化，所以pushstate後就要根據url處理元件的邏輯，返回前進可以利用onpopstate來處理

(_=>
,null
,"index"
)...
// 首次元件處理})
()1. window.
onpopstate
=(e)
=>
2. window.
addeventlistener
('popstate',(
)=>
)

pushstate接收三個引數，一是傳遞的引數，二是頁面設定的標題，三是改變後的url

最近在用vue3，於是用vue3簡單實現乙個history 的 route hooks，僅供參考

import routeconfig from
'./custompage'
import
from
'vue'
// 簡單實現個路由hook
export
default
function
initroute()
:array
}routechange
(activeroute.value)
// 前進後退處理
window.
addeventlistener
('popstate'
,(e)
=>})
return activeroute
}const
routechange
=(routename: string)
=>,''
, routename)
activeroute.value=routename
}return
[ routeconfig,
getcomponent,
routechange
]}

// 渲染元件
"freshnum"
:is=
"activename"
>
<
/component>
const
[ routeconfig, getcomponent, routechange ]
=initroute()
const activename =
getcomponent()
// 當前選中元件名
const menulist: string[
]= object.
keys
(routeconfig)
// 路由選單
routechange()
//路由跳轉執行

兩種方式雖然有些不同，但是實現理念與效果差距並不大實際上的使用差距並不大。

前端路由的核心原理並不難，繼續往下要有很多細節的處理，理解了hash 和 history 兩種模式，可以幫我們更好的理解vue/react路由的運作原理

前端實現路由

原生實現前端路由

前端路由實現原理

前端前端路由優缺點以及實現

前端實現路由

原生實現前端路由

前端路由實現原理

前端 前端路由優缺點以及實現

相關推薦

前端前端路由優缺點以及實現