Vue history路由模式 重新整理404

2021-10-24 06:51:22 字數 1527 閱讀 3536

在使用vue-router時候路由模式預設是hash;歷史模式(history mode)

history模式利用了 html5 history inte***ce 中新增的 pushstate() 和 replacestate() 方法。這兩個方法應用於瀏覽器的歷史記錄棧,在當前已有的 back、forward、go 的基礎之上,它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時,雖然改變了當前的 url,但瀏覽器不會立即向後端傳送請求。

hash 模式和 history 模式都屬於瀏覽器自身的特性,vue-router 只是利用了這兩個特性(通過呼叫瀏覽器提供的介面)來實現前端路由。

hash模式的#可能會使人認為不太美觀,於是選用了history,history相對於hash來說符合url標準格式,但是history模式有乙個很大的坑:重新整理404

1、hash 模式下重新整理會請求後台,但是url中只包含#之前的部分,後台是存在對應了路由的,不會404,頁面正常。

2、history 模式下重新整理請求後台,此時的url是所有的url,包含get引數,如:當後台中缺少對 /detail/id將返回 404 錯誤。history需要後台支援。

1、apache伺服器

1.apache開啟rewrite模組

**具體做法:**找到apache環境下的httpd.conf檔案,搜尋loadmodule rewrite_module modules/mod_rewrite.so(搜尋不到可以是空格,搜尋一部分只要能找到就行),去掉前面的「#」號。

注:loadmodule rewrite_module modules/mod_rewrite.so 如果找不到,請在httpd.conf新增

2.虛擬主機配置allowoverride為all

**具體做法:**最好把httpd.conf裡面的所有allowoverride none 修改為all

3、.htaccess

rewriteengine on

rewritebase /

rewriterule ^index\.html$ - [l]

rewritecond % !-f

rewritecond % !-d

// 注意:這個目錄是你設定存放vue上線檔案的目錄,如說我vue檔案放在了根目錄下的dist資料夾中,這樣可寫為/dist/index.html

rewriterule . /dist/index.html [l]

在**根目錄新增.htaccess 檔案,並把以上**新增進去, 儲存

4.重啟apache

server

// 這裡配置vue 』history『 路由子頁面無法重新整理

location @router

}```

VUE history模式Nginx配置

location 若專案沒有直接部署在nginx主目錄下,而是在其子目錄,如 nginx配置root路徑為 usr local nginx html,子目錄路徑為 usr local nginx html your folder,此時nginx應該這樣配置 location 重點是要加 your f...

Vue History模式IIS的配置補充

xml version 1.0 encoding utf 8 handle history mode and custom 404 500 stopprocessing true matchall add input matchtype isfile negate true add input ma...

NAT模式 路由模式 全路由模式

nat模式。此模式下,由區域網向廣域網傳送的資料報預設經過nat轉換,但路由器對所有源位址與區域網介面不在同一網段的資料報均不進行處理。例如,路由器lan口ip設定為192.168.1.1,子網掩碼為255.255.255.0,lan口所處網段為192.168.1.0 24,此時,路由器收到源位址為...