聊聊vue的兩種路由模式（哈希和歷史）

路由器分別有兩種模式：一種是hash模式、另一種是history模式，在使用vue -cli以及vue-router預設搭建的vue項目，如果不做特殊的配置，預設就是hash模式

這兩種模式各有自己的優勢，但他們的使用區別，卻多多少少都會在面試當中被問到

#今天就一起來學習下

哈希模式(hash )

vue-router預設hash模式,使用url的雜湊(hash)來模擬一個完整的URL,當URL改變時,頁面不會重新載入。 【相關推薦：vuejs影片教學、web前端開發】

#如下

http://localhost/#home

特點: #號後面的參數不會傳送給伺服器,相容性好,不會作為路徑的一部分發送給伺服器,也就是它不會包括在HTTP請求體中,對後端完全沒有影響,只是我們前端同學自己玩

頁面刷新時,會停留在當前頁面,不會重新加載

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

歷史模式

history模式:在實例化設定物件中新增mode模式,值為history就可以了的 經過改造後,hash模式就會變成history模式

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

這兩種方式的使用都是沒啥問題的,如果你在意瀏覽器url的顏值,#符號摻雜在url裡看起來確實有些不優雅

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

但是:在hash模式下,使用hash符號之前的內容會被包含在請求體中,#號後面的不會發送給伺服器

而history模式下,前端的URL必須和實際向後端發起請求的URL保持一致

如:https://itclan.cn/fontend/id,如果後端缺少沒有對/fontend /id的路由處理,那麼它將返回404錯誤

如果你想要支援history模式,那麼需要後端同學支援,想要徹底解決404的問題,需要與後端同學協商,因為需要後端與前端路由做匹配

在服務端增加一個覆蓋所有情況的時候的候選資源,如果url符合不到任何靜態資源,應該回傳一個首頁頁面

如果出現404,容易讓使用者覺得這是一個Bug

如何解決前台刷新頁面404問題

解決這個問題:如果你用的是Node做後端服務,那麼在Node後台中可以加入一個中間件例如：connect-history -api-fallback即可解決這種404問題

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

如下這段簡易的Node服務程式碼，可以命名為server.js,同時安裝express以及connect-history-api-fallback中間件

啟動後端服務執行指令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請求來取得

現在開發的新專案,都是前後端分離,基本上都是單頁​​應用

總結

前端路由,有兩種模式,一種是hash模式,另一種是history模式,其中hash模式是預設模式,#後面的不會傳送給服務端,不會重新刷新載入頁面,而history 模式,url雖然比較好看,但是想要完整支援,需要後端同學提供支援,後端路由與前端的路由需要做匹配

否則部署到線上,一刷新頁面,會出現404的問題

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是聊聊vue的兩種路由模式（哈希和歷史）的詳細內容。更多資訊請關注PHP中文網其他相關文章！