欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router中hash模式與history模式的區(qū)別

 更新時間:2021年06月23日 16:11:28   作者:一生注定學霸命  
為了構建 SPA(單頁面應用),需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關于vue-router中兩種模式區(qū)別的相關資料,分別是hash模式、history模式,需要的朋友可以參考下

vue-router有兩種模式

  • hash模式
  • history模式

1.單頁面應用

單頁應用

1.只有一個html文件,整個網(wǎng)站的所有內容都在這一個html里,通過js來處理

2.不僅僅是在頁面交互是無刷新的,連頁面跳轉都是無刷新的。為了實現(xiàn)單頁應用 ==> 前后端分離 + 前端路由。(更新視圖但不重新請求頁面)

前端路由

實現(xiàn)起來其實也很簡單,就是匹配不同的 url 路徑,進行解析,加載不同的組件,然后動態(tài)的渲染出區(qū)域 html 內容。

優(yōu)點

良好的交互體驗,用戶不需要刷新頁面,頁面顯示流暢, 良好的前后端工作分離模式,減輕服務器壓力,

缺點

不利于SEO,初次加載耗時比較多

2.hash模式

原理:是onhashchange事件,可以在window對象上監(jiān)聽這個事件

vue-router默認的是hash模式

1.使用URL的hash來模擬一個完整的URL

2.當URL改變的時候,頁面不會重新加載,也就是單頁應用了

2.當#后面的hash發(fā)生變化,不會導致瀏覽器向服務器發(fā)出請求,瀏覽器不發(fā)出請求就不會刷新頁面,并且會觸發(fā)hasChange這個事件,通過監(jiān)聽hash值的變化來實現(xiàn)更新頁面部分內容的操作

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

對于hash模式會創(chuàng)建hashHistory對象,在訪問不同的路由的時候,會發(fā)生兩件事:

1.HashHistory.push()將新的路由添加到瀏覽器訪問的歷史的棧頂,

2.HasHistory.replace()替換到當前棧頂?shù)穆酚?/p>

3.history模式

隨著history api的到來,前端路由開始進化了,前面的hashchange,你只能改變#后面的url片段,而history api則給了前端完全的自由

  • history api可以分為兩大部分:切換和修改

3.1 切換歷史狀態(tài)

包括back,forward,go三個方法
對應瀏覽器的前進,后退,跳轉操作
例如:(谷歌)瀏覽器只有前進和后退,沒有跳轉,嗯,在前進后退上長按鼠標,會出來所有當前窗口的歷史記錄,從而可以跳轉(也許叫跳更合適):

history.go(-2);//后退兩次
history.go(2);//前進兩次
history.back(); //后退
hsitory.forward(); //前進

3.2 修改歷史狀態(tài)

包括了pushState,replaceState兩個方法

這兩個方法接收三個參數(shù):stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

步驟

1.通過pushstate把頁面的狀態(tài)保存在state對象中

2.當頁面的url再變回這個url時,可以通過event.state取到這個state對象

3.從而可以對頁面狀態(tài)進行還原

4.這里的頁面狀態(tài)就是頁面字體顏色,其實滾動條的位置,閱讀進度,組件的開關的這些頁面狀態(tài)都可以存儲到state的里面。

3.3 history模式怕啥

hash 和 history 的區(qū)別

history 模式

1.通過history api,我們丟掉了丑陋的#,但是它也有個毛病

2.不怕前進,不怕后退,就怕刷新,f5

——history模式會將URL修改得就和正常請求后端的URL一樣,如后端沒有配置對應/user/id的路由處理,則會返回404錯誤

——所以這個實現(xiàn)需要服務器的支持,需要把所有路由都重定向到根頁面。

ash模式下

1.前面的hashchange,你只能改變#后面的url片段。而pushState設置的新URL可以是與當前URL同源的任意URL。

2.前端路由修改的是#中的信息,而瀏覽器請求時是不帶它玩的,所以沒有問題.但是在history下,你可以自由的修改path,當刷新時,如果服務器中沒有相應的響應或者資源,會分分鐘刷出一個404來。

總結

到此這篇關于vue-router中hash模式與history模式區(qū)別的文章就介紹到這了,更多相關vue-router模式區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue如何讀取本地文件

    vue如何讀取本地文件

    這篇文章主要介紹了vue如何讀取本地文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中的.$mount(''#app'')手動掛載操作

    vue中的.$mount(''#app'')手動掛載操作

    這篇文章主要介紹了vue中.$mount('#app')手動掛載操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Element修改彈窗類組件的層級的實現(xiàn)

    Element修改彈窗類組件的層級的實現(xiàn)

    本文主要介紹了Element修改彈窗類組件的層級的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue動態(tài)路由配置及路由傳參的方式

    vue動態(tài)路由配置及路由傳參的方式

    這篇文章主要介紹了vue動態(tài)路由配置,vue路由傳參的方式,文中給大家提到了router-link這個組件的相關知識,需要的朋友可以參考下
    2018-05-05
  • 如何解決ElementUI導航欄重復點菜單報錯問題

    如何解決ElementUI導航欄重復點菜單報錯問題

    這篇文章主要介紹了如何解決ElementUI導航欄重復點菜單報錯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決

    安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決

    這篇文章主要介紹了安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 前端實現(xiàn)pdf預覽功能的全過程(基于vue)

    前端實現(xiàn)pdf預覽功能的全過程(基于vue)

    這篇文章主要給大家介紹了關于前端實現(xiàn)pdf預覽功能的相關資料,前端實現(xiàn)預覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • 如何使用Vue+Element做個個人中心

    如何使用Vue+Element做個個人中心

    我們在做了用戶登錄后,就會讓用戶跳轉到個人中心,下面這篇文章主要給大家介紹了關于如何使用Vue+Element做個個人中心的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • vue3使用axios并封裝axios請求的詳細步驟

    vue3使用axios并封裝axios請求的詳細步驟

    本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請求的詳細步驟,結合實例代碼給大家講解的非常詳細,需要的朋友參考下吧
    2023-06-06
  • element中一個單選框radio時的選中和取消代碼詳解

    element中一個單選框radio時的選中和取消代碼詳解

    這篇文章主要給大家介紹了關于element中一個單選框radio時的選中和取消的相關資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考價值,需要的朋友可以參考下
    2023-09-09

最新評論