這次帶給大家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)二.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中文網其他相關文章！
