vue的兩種路由模式源碼分析
這篇文章主要介紹“vue的兩種路由模式源碼分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue的兩種路由模式源碼分析”文章能幫助大家解決問題。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、網站空間、營銷軟件、網站建設、科爾沁右翼前網站維護、網站推廣。
哈希模式(hash)
vue-router默認hash模式,使用url的哈希(hash)來模擬一個完整的URL,當URL改變時,頁面不會重新加載。
如下所示
http://localhost/#home
特點: #號后面的參數不會傳送給服務器,兼容性好,不會作為路徑的一部分發(fā)送給服務器,也就是它不會包括在HTTP請求體中,對后端完全沒有影響,只是我們前端同學自己玩
頁面刷新時,會停留在當前頁面,不會重新加載
如果覺得hash路徑很丑,不簡潔,我們可以用路由的history模式,這種模式充分利用history.pushState API或replaceState,來完成,url跳轉而無需重新加載頁面
歷史模式
history模式:在實例化配置對象中添加mode模式,值為history就可以了的
經過改造后,hash模式就會變成history模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})這兩種方式的使用都是沒啥問題的,如果你在意瀏覽器url的顏值,#符號摻雜在url里看起來確實有些不優(yōu)雅
如果你想url更好看,那么就使用history模式
但是:在hash模式下,使用hash符號之前的內容會被包含在請求體中,#號后面的不會發(fā)送給服務器
而history模式下,前端的URL必須和實際向后端發(fā)起請求的URL保持一致
如:https://itclan.cn/fontend/id,如果后端缺少沒有對/fontend/id的路由處理,那么它將返回404錯誤
如果你想要支持history模式,那么需要后端同學支持,想要徹底解決404的問題,需要與后端同學協商,因為需要后端與前端路由做匹配
在服務端增加一個覆蓋所有情況的時候的候選資源,如果url匹配不到任何靜態(tài)資源,應該返回一個首頁頁面
如果出現404,容易讓用戶覺得這是一個Bug
如何解決前臺刷新頁面404問題
解決這個問題:如果你用的是Node做后端服務,那么在Node后臺中可以加入一個中間件比如：connect-history-api-fallback即可解決這種404問題
如果是java或php,找后端同學,讓后端路由與前端路由做匹配,或是用Ngnix做中間代理
如下這段簡易的Node服務代碼，可以命名為server.js,同時安裝express以及connect-history-api-fallback中間件
啟動后端服務執(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('服務器啟動成功了')
})把前端打包生成的dist文件內的代碼,放到static中,通過這一操作,即可解決刷新頁面,404的問題
對單頁面spa的應用理解
我們的前端使用的vue-router中的兩種模式,就是單頁面應用,整個應用只有一個router路由器,是可以通過$router屬性獲取到
也就是說,整個應用只有一個完整的頁面,同時,點擊頁面中的導航鏈接,不會刷新頁面,只會是頁面的局部更新
而我們頁面中的數據,往往需要通過ajax請求來獲取
現在開發(fā)的新項目,都是前后端分離,基本上都是單頁面應用
關于“vue的兩種路由模式源碼分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
分享題目：vue的兩種路由模式源碼分析
文章鏈接：http://bm7419.com/article38/jjedsp.html
成都網站建設公司_創(chuàng)新互聯，為您提供用戶體驗、網站建設、、網站營銷、靜態(tài)網站、關鍵詞優(yōu)化
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯
