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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、科爾沁右翼前網(wǎng)站維護(hù)、網(wǎng)站推廣。

哈希模式(hash)

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

如下所示

http://localhost/#home

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

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

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

歷史模式

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

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

這兩種方式的使用都是沒啥問題的,如果你在意瀏覽器url的顏值,#符號(hào)摻雜在url里看起來確實(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的問題,需要與后端同學(xué)協(xié)商,因?yàn)樾枰蠖伺c前端路由做匹配

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

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

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

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

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

如下這段簡易的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中,通過這一操作,即可解決刷新頁面,404的問題

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

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

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

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

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

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

分享題目：vue的兩種路由模式源碼分析
文章鏈接：http://jinyejixie.com/article38/jjedsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站建設(shè)、、網(wǎng)站營銷、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)