這次帶給大家vue的單頁應用前端路由使用詳解,vue單頁應用前端路由使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
寫在前面:通常SPA 中前端路由有2種實作方式:
#window.history
location. hash
以下就來介紹下這兩種方式具體怎麼實現的
一.history
1.history基本介紹
window.history 物件包含瀏覽器的歷史,window.history 物件在撰寫時可不使用window 這個前綴。 history是實作SPA前端路由是一種主流方法,它有幾個原始方法:
history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同
#history.go(n) - 接受一個整數作為參數,移動到該整數指定的頁面,例如go(1)相當於forward(),go(-1)相當於back(),go(0)相當於刷新目前頁面
2.history.pushState
pushState(stateObj, title, url) 方法向歷史堆疊中寫入數據,其第一個參數是要寫入的資料物件(不大於640kB),第二個參數是頁面的title, 第三個參數是url (相對路徑)。3.history.replaceState
replaceState(stateObj, title, url) 和pushState的差異就在於它不是寫入而是替換修改瀏覽歷史中當前紀錄,其餘和pushState一模一樣4.popstate事件
定義:每當同一個文檔的瀏覽歷史(即history物件)出現變化時,就會觸發popstate事件。 注意:僅僅呼叫pushState方法或replaceState方法,並不會觸發該事件,只有使用者點擊瀏覽器倒退按鈕和前進按鈕,或使用JavaScript呼叫back、forward、go方法時才會觸發。另外,該事件只針對同一個文檔,如果瀏覽歷史的切換,導致加載不同的文檔,該事件也不會觸發。
用法:使用的時候,可以為popstate事件指定回呼函數。這個回呼函數的參數就是一個event事件對象,它的state屬性指向pushState和replaceState方法為目前URL所提供的狀態物件(即這兩個方法的第一個參數)。
5.history實作spa前端路由代碼
<a class="api a">a.html</a> <a class="api b">b.html</a> // 注册路由 document.querySelectorAll('.api').forEach(item => { item.addEventListener('click', e => { e.preventDefault(); let link = item.textContent; if (!!(window.history && history.pushState)) { // 支持History API window.history.pushState({name: 'api'}, link, link); } else { // 不支持,可使用一些Polyfill库来实现 } }, false) }); // 监听路由 window.addEventListener('popstate', e => { console.log({ location: location.href, state: e.state }) }, false)popstate監聽函數裡印出的e.state便是history.pushState()裡傳入的第一個參數,在這裡即為{name: 'api'}
二.Hash
1.Hash基本介绍
url 中可以带有一个 hash http://localhost:9000/#/a.html
window 对象中有一个事件是 onhashchange,以下几种情况都会触发这个事件:
直接更改浏览器地址,在最后面增加或改变#hash;
通过改变location.href或location.hash的值;
通过触发点击带锚点的链接;
浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同。
2.Hash实现spa前端路由代码
// 注册路由 document.querySelectorAll('.api').forEach(item => { item.addEventListener('click', e => { e.preventDefault(); let link = item.textContent; location.hash = link; }, false) }); // 监听路由 window.addEventListener('hashchange', e => { console.log({ location: location.href, hash: location.hash }) }, false)
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是vue的單頁應用前端路由使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!