單頁web應用(spa)內部路由原理

2021-09-26 22:26:03 字數 342 閱讀 4690

可以將路由的實現分為兩部分

1.更新url頁面不重新整理

2.監聽url的變化,執行頁面替換邏輯

兩種實現方法

1.history.pushstate,replacestate等觸發popstate事件

2.location.hash的變化觸發hashchange事件

function getuuid () 

window.onload = function ()

window.onhashchange = (e) =>

}

SPA 單頁面應用 單頁Web應用

正常網頁url的組成,可以請看location 物件 包含有關當前 url 的資訊。例如 如上的 url 由以下部分組成 1 https 規定了頁面採用的協議 2 mp.csdn.net 為頁面所屬的網域名稱 3 postedit index.html為讀取的檔名稱 也可以叫做入口檔案 4 name...

淺看spa單頁應用路由

路由觀察瀏覽器的url的變更。當url 變更時,路由會解析它並生成乙個新的路由例項。乙個基本的路由是這樣的 class router public initialize 讀取url private getroute 解析url private parseroute hash string comp ...

單頁應用SPA 多頁應用MPA

spa單頁應用 第一次進入頁面的時候會請求乙個html檔案,重新整理清除一下。切換到其他元件,此時路徑也相應變化,但是並沒有新的html檔案請求,頁面內容也變化了。原理是 js會感知到url的變化,通過這一點,可以用js動態的將當前頁面的內容清除掉,然後將下乙個頁面的內容掛載到當前頁面上,這個時候的...