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

2021-09-19 18:47:36 字數 1445 閱讀 5540

ssm時代,多頁面時代,需要頁面渲染模板,如 freemark,jsp 等模板引擎。前後端沒有分離時,路由是由後端處理的,瀏覽器接收到 .do .action的請求,傳到後台對應 spring mvc 會進行邏輯處理返回對應的頁面,實現路由的分發 return **.jsp 或者 return modelandview物件,封裝了實體資料和檢視渲染的模板

單頁應用時代,只有乙個html載入,所有頁面都是通過js來改變頁面元素,前後端分離,減輕伺服器端壓力,路由需要前端自己的實現

從效能和使用者體驗的層面來比較的話,後端路由每次訪問乙個新頁面的時候都要向伺服器傳送請求,然後伺服器再響應請求,這個過程肯定會有延遲。而前端路由在訪問乙個新頁面的時候僅僅是變換了一下路徑而已,沒有了網路延遲,對於使用者體驗來說會有相當大的提公升。

在某些場合中,用ajax請求,可以讓頁面無重新整理,頁面變了但url沒有變化,使用者就不能複製到想要的位址,用前端路由做單頁面網頁就很好的解決了這個問題

使用瀏覽器的前進,後退鍵的時候會重新傳送請求,沒有合理地利用快取

特點:會重新重新整理頁面,browserhistory

window.location.href='' history.back();
特點:不會重新整理頁面,不能跳轉其他路徑,只會在當前路徑後面拼上#/test/sss hash就是#後面的路徑瀏覽器不會解析,可以通過hashchange來進行操作hashhistory

window.location.href='#/test/sss' 

window.location.href='#test' window.onhashchange = function()

上面路由都可以用a便簽來跳轉

特點:可以在同源下其他路徑跳轉 優於#路由,可以操作路徑也可以操作hash 但是相容不好

window.history.putstate(data,title,url) //可以是絕對路徑 或者是相對路徑  新增當前路徑到歷史棧   

window.history.replacestate(data,title,url) //替代當前路徑 不會重新整理 把他替代歷史棧的位置

onhashchange事件

window.onpopstate= function(e) //後退時觸發

window.onpopstate = function()

window.history.back()

//不能跨域

uncaught domexception: failed to execute 'replacestate' on 'history': a history state object with url '/sss' cannot be created in a document with origin '' and url '/'.at :1:16

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

ssm時代,多頁面時代,需要頁面渲染模板,如 freemark,jsp 等模板引擎。前後端沒有分離時,路由是由後端處理的,瀏覽器接收到 do action的請求,傳到後台對應 spring mvc 會進行邏輯處理返回對應的頁面,實現路由的分發 return jsp 或者 return modelan...

前端路由優缺點

前端路由 客戶端瀏覽器可以不依賴服務端,根據不同的url渲染不同的檢視頁面。優點 從效能和使用者體驗的層面來比較的話,後端路由每次訪問乙個新頁面的時候都要向伺服器傳送請求,然後伺服器再響應請求,這個過程肯定會有延遲。而前端路由在訪問乙個新頁面的時候僅僅是變換了一下路徑而已,沒有了網路延遲,對於使用者...

Vue前端路由的優缺點

路由是根據不同的 url 位址展示不同的內容或頁面 前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做,之前是通過服務端根據 url 的不同返回不同的頁面實現的 在單頁面應用,大部分頁面結構不變,只改變部分內容的時候使用 優點 使用者體驗好,不需要每次都從伺服器全部獲取,快速展現給使用者 ...