一般會當做面試題問
vue 有幾種路由模式
- hash 模式
- history 模式
異同
- hash模式：通過#號后面的內(nèi)容的更改，觸發(fā)hashchange事件崖堤，實現(xiàn)路由切換
- history模式：通過pushState和replaceState切換url，觸發(fā)popstate事件密幔，實現(xiàn)路由切換胯甩，需要后端配合
深入了解一下事件
hash hashchange
1、hash即URL中"#"字符后面的部分堪嫂。
≠梭铩①使用瀏覽器訪問網(wǎng)頁時，如果網(wǎng)頁URL中帶有hash皆串，頁面就會定位到id（或name）與hash值一樣的元素的位置淹办；
②hash還有另一個特點恶复，它的改變不會導致頁面重新加載怜森；
③hash值瀏覽器是不會隨請求發(fā)送到服務(wù)器端的谤牡；
「惫琛④通過window.location.hash獲取和設(shè)置hash。
window.location.hash值的變化會直接反應(yīng)到瀏覽器地址欄（#后面的部分會發(fā)生變化）拓哟，同時想许，瀏覽器地址欄hash值的變化也會觸發(fā)window.location.hash值的變化断序，從而觸發(fā)onhashchange事件。
2、hashchange事件（IE8已支持該事件）
「新邸①當URL的片段標識符更改時，將觸發(fā)hashchange事件（跟在#符號后面的URL部分芳绩，包括#符號）
②hashchange事件觸發(fā)時，事件對象會有hash改變前的URL（oldURL）和hash改變后的URL（newURL）兩個屬性：
window.addEventListener('hashchange',function(e) { console.log(e.oldURL); console.log(e.newURL) },false);
監(jiān)聽hashchange 事件, 跳轉(zhuǎn)到根路由的時候, 就會打印出新舊hash值.
history模式
意思就是假設(shè):
前端跳轉(zhuǎn)的路由,是后端同學返回的, '/data/water'
但是前端沒有配置這個靜態(tài)路由, 就會直接返回 404 not found 頁面.
so 需要前后端配合, 要么返回前端自己寫的漂亮的404 頁面, 要么是返回到項目首頁. (返回首頁也不是很友好, 可能會打斷用戶的操作思路和順序)
就需要前端配置一個路由
或者后端配置nginx 等等
參考配置: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
關(guān)于history.pushState() 方法是做什么的, 這篇文章比較詳細
https://blog.csdn.net/yexudengzhidao/article/details/101448168
可以了解一下,
總結(jié)
意思就是 history.pushState 給瀏覽器創(chuàng)造了一個歷史記錄, 你沒訪問過的歷史記錄, 然后回退的時候, 想去到這個沒訪問過的頁面, 可以直接使用 history.go(-1)
比較方便.
以上
