1.前端路由

是針對SPA應用來說的，前端路由是不涉及服務器的，是前端利用hash或者HTML5的history API來實現的，通過router庫的api來進行的URL更新，一般用于不同內容的展示和切換

2.后端路由

是瀏覽器在地址欄中切換不同的url時，每次都向后臺服務器發出請求，服務器響應請求，在后臺拼接html文件傳給前端顯示,?返回不同的頁面

3.vue中的Hash模式和History模式

Hash模式

hash模式利用的是瀏覽器不會對#號后面的路徑對服務端發起路由請求。也即在瀏覽器里輸入如下這兩個地址：http://localhost/#/user/1和http://localhost/其實到服務端都是去請求http://localhost這個頁面的內容。

而前端的router庫通過捕捉#號后面的參數、地址，來告訴前端庫（比如Vue）渲染對應的頁面。這樣，不管是我們在瀏覽器的地址欄輸入，或者是頁面里通過router的api進行的跳轉，都是一樣的跳轉邏輯。所以這個模式是不需要后端配置其他邏輯的，只要給前端返回http://localhost對應的html，剩下具體是哪個頁面，就由前端路由去判斷便可。

History模式

不帶#號的路由，也就是我們通常能見到的URL形式。該模式要實現這個功能一般都是通過HTML5提供的history這個api。它有pushState() 和 replaceState() 方法（需要特定瀏覽器支持），用來完成 URL 跳轉而無須重新加載頁面，不過這種模式還需要后臺配置支持。由于這兩個方法的作用就是可以將url替換并且不刷新頁面，因此瀏覽器一旦刷新，就會去真正請求服務器資源，導致頁面報錯404，需要服務器端做點手腳，將不存在的路徑請求重定向到入口文件（index.html）。調用 history.pushState() 相比于直接修改 hash，存在以下優勢:

pushState() 設置的新 URL 可以是與當前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設置與當前 URL 同文檔的 URL
pushState() 設置的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設置的新值必須與原來不一樣才會觸發動作將記錄添加到棧中
pushState() 通過 stateObject 參數可以添加任意類型的數據到記錄中；而 hash 只可添加短字符串
pushState() 可額外設置 title 屬性供后續使用

總結

以上是生活随笔為你收集整理的前端路由与后端路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。