vue的兩種路由模式源碼分析

這篇文章主要介紹“vue的兩種路由模式源碼分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue的兩種路由模式源碼分析”文章能幫助大家解決問(wèn)題。

哈希模式(hash)

vue-router默認(rèn)hash模式,使用url的哈希(hash)來(lái)模擬一個(gè)完整的URL,當(dāng)URL改變時(shí),頁(yè)面不會(huì)重新加載。

如下所示

http://localhost/#home

特點(diǎn): #號(hào)后面的參數(shù)不會(huì)傳送給服務(wù)器,兼容性好,不會(huì)作為路徑的一部分發(fā)送給服務(wù)器,也就是它不會(huì)包括在HTTP請(qǐng)求體中,對(duì)后端完全沒(méi)有影響,只是我們前端同學(xué)自己玩

頁(yè)面刷新時(shí),會(huì)停留在當(dāng)前頁(yè)面,不會(huì)重新加載

如果覺(jué)得hash路徑很丑,不簡(jiǎn)潔,我們可以用路由的history模式,這種模式充分利用history.pushState API或replaceState,來(lái)完成,url跳轉(zhuǎn)而無(wú)需重新加載頁(yè)面

歷史模式

history模式:在實(shí)例化配置對(duì)象中添加mode模式,值為history就可以了的 經(jīng)過(guò)改造后,hash模式就會(huì)變成history模式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

這兩種方式的使用都是沒(méi)啥問(wèn)題的,如果你在意瀏覽器url的顏值,#符號(hào)摻雜在url里看起來(lái)確實(shí)有些不優(yōu)雅

如果你想url更好看,那么就使用history模式

但是:在hash模式下,使用hash符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求體中,#號(hào)后面的不會(huì)發(fā)送給服務(wù)器

而history模式下,前端的URL必須和實(shí)際向后端發(fā)起請(qǐng)求的URL保持一致

如:https://itclan.cn/fontend/id,如果后端缺少?zèng)]有對(duì)/fontend/id的路由處理,那么它將返回404錯(cuò)誤

如果你想要支持history模式,那么需要后端同學(xué)支持,想要徹底解決404的問(wèn)題,需要與后端同學(xué)協(xié)商,因?yàn)樾枰蠖伺c前端路由做匹配

在服務(wù)端增加一個(gè)覆蓋所有情況的時(shí)候的候選資源,如果url匹配不到任何靜態(tài)資源,應(yīng)該返回一個(gè)首頁(yè)頁(yè)面

如果出現(xiàn)404,容易讓用戶覺(jué)得這是一個(gè)Bug

如何解決前臺(tái)刷新頁(yè)面404問(wèn)題

解決這個(gè)問(wèn)題:如果你用的是Node做后端服務(wù),那么在Node后臺(tái)中可以加入一個(gè)中間件比如：connect-history-api-fallback即可解決這種404問(wèn)題

如果是java或php,找后端同學(xué),讓后端路由與前端路由做匹配,或是用Ngnix做中間代理

如下這段簡(jiǎn)易的Node服務(wù)代碼，可以命名為server.js,同時(shí)安裝express以及connect-history-api-fallback中間件

啟動(dòng)后端服務(wù)執(zhí)行命令node server.js

const express = require('express');
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'));


app.listen(5005,(err)=> {
  if（！err）consle.log('服務(wù)器啟動(dòng)成功了')
})

把前端打包生成的dist文件內(nèi)的代碼,放到static中,通過(guò)這一操作,即可解決刷新頁(yè)面,404的問(wèn)題

對(duì)單頁(yè)面spa的應(yīng)用理解

我們的前端使用的vue-router中的兩種模式,就是單頁(yè)面應(yīng)用,整個(gè)應(yīng)用只有一個(gè)router路由器,是可以通過(guò)$router屬性獲取到

也就是說(shuō),整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面,同時(shí),點(diǎn)擊頁(yè)面中的導(dǎo)航鏈接,不會(huì)刷新頁(yè)面,只會(huì)是頁(yè)面的局部更新

而我們頁(yè)面中的數(shù)據(jù),往往需要通過(guò)ajax請(qǐng)求來(lái)獲取

現(xiàn)在開發(fā)的新項(xiàng)目,都是前后端分離,基本上都是單頁(yè)面應(yīng)用

關(guān)于“vue的兩種路由模式源碼分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。