Vue中如何把hash模式改為history模式
把hash模式改為history模式
如上圖所示非常簡單
只需要在文件router下的index.js里加上一個mode:'history’即可把hash模式改為history模式.這個時候url上面的#號就不會再存在了,這樣就把url成功把hash模式改成history了
關于路由hash和history模式
hash模式
hash 就是指 url 后的 # 號以及后面的字符，
比如，http://127.0.0.1:5500/test.html#/user，這里的hash值就是#/user。
hash 值的變化不會導致瀏覽器像服務器發(fā)送請求
hash 的改變會觸發(fā) hashChange 事件，瀏覽器的前進后退也能對其進行控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hash模式的實現(xiàn)</title>
</head>
<body>
<button id="myBtn">改變hash的值</button>
<script>
const myBtn = document.getElementById('myBtn');
// 通過 onhashchange 監(jiān)聽hash值變化
window.onhashchange = (e) => {
console.log('老URL',e.oldURL);
console.log('新URL',e.newURL);
console.log('hash',location.hash);
}
</script>
</body>
</html>上面是通過 on 來監(jiān)聽事件，其實也可以用
window.addEventListener("hashchange", funcRef, false);改變hash的三種方式：
第一種：手動在導航欄中修改
控制臺的輸出
第二種方式：手動點擊前進后退按鈕
這里是點擊了后退按鈕，從 #/user 后退到了 #/
第三種方式：通過js代碼修改
給按鈕增加監(jiān)聽函數，當點擊按鈕時，進行路由改變。
<script>
const myBtn = document.getElementById('myBtn');
window.onhashchange = (e) => {
console.log('老URL',e.oldURL);
console.log('新URL',e.newURL);
console.log('hash',location.hash);
}
// 增加監(jiān)聽函數
myBtn.addEventListener('click',() => {
location.href = '#/user';
})
</script>起初，路由位于http://127.0.0.1:5500/test.html#/，
然后點擊按鈕
注：Location對象用于表示window上當前鏈接到的URL信息。
href: 當前window對應的超鏈接URL, 整個URL；hash: 哈希值；pathname：訪問頁面；
用一個網址來演示location的屬性
//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb location.protocal // 'http:' localtion.hostname // '127.0.0.1' location.host // '127.0.0.1:8001' location.port //8001 location.pathname //'01-hash.html' location.serach // '?a=100&b=20' location.hash // '#/aaa/bbb'
對于href屬性
history 模式
默認情況下, 路徑的改變使用的URL的hash.
如果使用history模式，在配置路由規(guī)則時，加入"mode: ‘history’".
//main.js文件中
const router = new VueRouter({
mode: 'history',
routes: [...]
})history 模式，每訪問一個頁面都要發(fā)起網絡請求，每個請求都需要服務器進行路由匹配、數據庫查詢、生成HTML文檔后再發(fā)送響應給瀏覽器，這個過程會消耗服務器的大量資源，給服務器的壓力較大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history模式的實現(xiàn)</title>
</head>
<body>
<button id="myBtn">改變hash的值</button>
<script>
const myBtn = document.getElementById('myBtn');
window.addEventListener('DOMContentLoaded',() => {
//頁面DOM加載完畢后打印出頁面的路徑
console.log('path: ',location.pathname);
})
myBtn.addEventListener('click',() => {
const state = {name:'user'};
history.pushState(state, '', 'user');
console.log('切換路由到了','user');
console.log('path: ',location.pathname);
})
</script>
</body>
</html>起初路由位于http://127.0.0.1:5500/test.html，
當點擊了按鈕之后，路由變成了http://127.0.0.1:5500/user。
history 模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
history.pushState(); ? ? ? ? // 添加新的狀態(tài)到歷史狀態(tài)棧 history.replaceState(); ? ? ?// 用新的狀態(tài)代替當前狀態(tài) history.state ? ? ? ? ? ? ? ?// 返回當前狀態(tài)對象
history.pushState()在保留現(xiàn)有歷史記錄的同時，將 url 加入到歷史記錄中。history.replaceState()會將歷史記錄中的當前頁面歷史替換為 url。
由于 history.pushState() 和 history.replaceState() 可以改變 url 同時，不會刷新頁面，所以在 HTML5 中的 histroy 具備了實現(xiàn)前端路由的能力。
這兩個方法有個共同的特點：當調用他們修改瀏覽器歷史記錄棧后，雖然當前 URL 改變了，但瀏覽器不會刷新頁面，這就為單頁應用前端路由“更新視圖但不重新請求頁面”提供了基礎。
history
在修改 url 后，雖然頁面并不會刷新，但我們在手動刷新，或通過 url 直接進入應用的時候， 服務端是無法識別這個 url 的，會報 404 問題。
因為我們是單頁應用，只有一個 html 文件，服務端在處理其他路徑的 url 的時候，就會出現(xiàn)404的情況。 所以，如果要應用 history 模式，需要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回單頁應用的 html 文件。
popstate
在history模式中與hash模式的hashchange對應的是popState。
popstate是在瀏覽器回退前進或者js的 back() go() forward()方法的時候才會觸發(fā)。
//監(jiān)聽 popstate 事件
window.onpopstate = (e) => {
console.log('onpopstate', e.state, location.pathname);
}二者對比
1.從兼容角度分析。
hash 可以兼容到 IE8，history 只能兼容到 IE10。
2.從網絡請求的角度分析。
使用 hash 模式，地址改變時通過 hashchange 事件，只會讀取哈希符號后的內容，并不會發(fā)起任何網絡請求。
history 模式，每訪問一個頁面都要發(fā)起網絡請求，每個請求都需要服務器進行路由匹配、數據庫查詢、生成HTML文檔后再發(fā)送響應給瀏覽器，這個過程會消耗服務器的大量資源，給服務器的壓力較大。
3.服務器配置角度分析。
hash 不需要服務器任何配置。
history 進行刷新頁面時，無法找到url對應的頁面，會出現(xiàn) 404 問題。如果要應用 history 模式，需要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回單頁應用的 html 文件。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家分享一篇mint-ui 時間插件使用及獲取選擇值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關于vue中watch和computed區(qū)別的相關資料,computed和watch都是vue框架中的用于監(jiān)聽數據變化的屬性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車的小練習，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應式原理，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法
這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue中引入樣式文件的方法,需要的朋友可以參考下2017-08-08
等比例縮放可以在不同的分辨率下都能夠一屏展示,不會有滾動條的問題,也不會有適配問題,下面這篇文章主要給大家介紹了關于vue項目網頁自適應等比例放大縮小的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue 手機物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09