在近期做的一個小項目中，本地路由跳轉(zhuǎn)沒有任何問題，使用nginx部署上線后出現(xiàn)很多路由無法跳轉(zhuǎn)的問題。

經(jīng)過一番研究，發(fā)現(xiàn)可以通過以下兩種方式解決。

一、將路由改為hash模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會向后端發(fā)出請求。

為什么hash模式下沒有問題

router hash 模式我們都知道是用符號#表示的，如 website.com/#/login, hash 的值為 #/login

它的特點在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對服務(wù)端完全沒有影響，因此改變 hash 不會重新向服務(wù)端發(fā)送請求。而改變hash，在hash模式中會被hashChange方法所捕獲，在vue中會觸發(fā)頁面的修改。

hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 website.com/#/login 只有 website.com 會被包含在請求中 ，因此對于服務(wù)端來說，即使沒有配置location，也不會返回404錯誤

具體操作：找到router文件夾下的index.js文件，將mode改為hash

二、history模式后端配置nginx

如果覺得hash模式的路由模式顯示在地址欄有 “#” 不好看，想使用history模式，就需要配置nginx。

為什么history模式下有問題

Vue是屬于單頁應(yīng)用（SPA）

而SPA是一種網(wǎng)絡(luò)應(yīng)用程序，所有與用戶交互都是通過動態(tài)重寫當(dāng)前頁面來實現(xiàn)頁面變化的，前面我們也看到了，不管我們應(yīng)用有多少頁面，構(gòu)建物都只會產(chǎn)出一個index.html

現(xiàn)在，我們回頭來看一下我們的nginx配置：

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

可以根據(jù) nginx 配置得出，當(dāng)我們在地址欄輸入 www.xxx.com 時，

這時會打開我們 dist 目錄下的 index.html 文件，然后我們在跳轉(zhuǎn)路由進入到 www.xxx.com/login，

關(guān)鍵在這里，當(dāng)我們在 www.xxx.com/login 頁執(zhí)行刷新操作，nginx location 是沒有相關(guān)/login配置的，所以就會出現(xiàn) 404 的情況。

因此需要重新配置nginx，將任意頁面都重定向到 index.html

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論