您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue的hash與history有哪些區(qū)別”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue的hash與history有哪些區(qū)別”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
路由分兩種:
前端路由:Hash 地址與組件之間的對應(yīng)關(guān)系
后端路由:瀏覽器 請求地址+請求方式 與 后端 業(yè)務(wù)邏輯 之間的一個(gè)映射關(guān)系
SPA與前端路由:
SPA (單頁面應(yīng)用,全稱為:Single-page Web applications) 指的是一個(gè) web 網(wǎng)站只有唯一的一個(gè) HTML 頁面,所有組件的展示與切換都在這唯一的一個(gè)頁面內(nèi)完成,此時(shí),不同組件之間的切換需要通過前端路由來實(shí)現(xiàn)
vue-router通過hash與History interface兩種方式實(shí)現(xiàn)前端路由,更新視圖但不重新請求頁面”是前端路由原理的核心之一,目前在瀏覽器環(huán)境中這一功能的實(shí)現(xiàn)主要有兩種方式:
利用URL中的hash(“#”)
利用History interface在 HTML5中新增的方法
在vue-router中,它提供了mode參數(shù)來決定采用哪一種方式 mode參數(shù):
默認(rèn)hash
手動(dòng)設(shè)置為history
router/index.js文件代碼
那么,兩者的區(qū)別是什么呢?
vue-router默認(rèn)為hash模式,使用URL的hash來模擬一個(gè)完整的URL,當(dāng)URL改變時(shí),頁面不會重新加載。#就是hash符號,中文名為哈希符或者錨點(diǎn),在hash符號后的值稱為hash值。
路由的hash模式是利用了window可以監(jiān)聽onhashchange事件來實(shí)現(xiàn)的,也就是說hash值是用來指導(dǎo)瀏覽器動(dòng)作的,對服務(wù)器沒有影響,HTTP 請求中也不會包括hash值,同時(shí)每一次改變hash值,都會在瀏覽器的訪問歷史中增加一個(gè)記錄,使用“后退”按鈕,就可以回到上一個(gè)位置。所以,hash 模式是根據(jù)hash值來發(fā)生改變,根據(jù)不同的值,渲染指定DOM位置的不同數(shù)據(jù)。
當(dāng)你使用 history 模式時(shí),URL 就像正常的 url,例如 http://yoursite.com/user/id
,也好看!
不過這種模式要玩好,還需要后臺配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用,如果后臺沒有正確的配置,當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id
就會返回 404,這就不好看了。
所以呢,你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè) index.html
頁面,這個(gè)頁面就是你 app 依賴的頁面
讀到這里,這篇“Vue的hash與history有哪些區(qū)別”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。