vue router 刷新404問題

zilu 發(fā)布于2019-08-23 14:34 / 2523人閱讀

摘要：問題描述單頁面應(yīng)用的項(xiàng)目，設(shè)置模式為?？梢蕴D(zhuǎn)但刷新了頁面，則顯示為。但是這種很丑，也不符合對的使用習(xí)慣。所以，需要使用另外一個(gè)叫模式來實(shí)現(xiàn)跳轉(zhuǎn)而無須重新加載頁面。服務(wù)器配置服務(wù)器配置

1. 問題描述

單頁面應(yīng)用的vue項(xiàng)目，設(shè)置router模式為history?？梢蕴D(zhuǎn)但刷新了頁面，則顯示為404。

vue-router的默認(rèn)hash模式使用URL的hash來模擬一個(gè)完整的URL，當(dāng)URL改變時(shí)，頁面不會(huì)重新加載。但是這種hash很丑，也不符合對URL的使用習(xí)慣。所以，需要使用另外一個(gè)叫history模式來實(shí)現(xiàn)URL跳轉(zhuǎn)而無須重新加載頁面。

export default new Router({
    mode: "history",
    routes: [# other code ]
)}

2. Apache服務(wù)器配置


    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

3. nginx服務(wù)器配置

location / {
    try_files $uri $uri/ /index.html;
}

GPU云服務(wù)器云服務(wù)器 Vue Router vue-router cdn刷新緩存報(bào)404 訪問出現(xiàn)404問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100802.html

相關(guān)文章

vue路由history模式刷新頁面出現(xiàn)404問題

摘要：模式下，中存在，用模式就能解決這個(gè)問題。但是模式會(huì)出現(xiàn)刷新頁面后，頁面出現(xiàn)。解決的辦法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解決這個(gè)問題。但是history模式會(huì)出現(xiàn)刷新頁面后，頁面出現(xiàn)404。解決的辦法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 評論0 收藏0
VUE-Router按模塊配置、懶加載+ Windows中Nginx服務(wù)安裝、配置解決404

摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種。無法啟動(dòng)服務(wù)，報(bào)錯(cuò)參考資料發(fā)現(xiàn)端口沖突，已經(jīng)在服務(wù)中已經(jīng)配置端口。服務(wù)端口更改為。文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種BUG。參考了很多方法，會(huì)在文章中引用出來...

habren 2019-07-25 14:37 評論0 收藏0
vue刷新404

摘要：部署完成后，訪問首頁沒問題，從首頁里打開二級(jí)頁面沒問題，但是所有的二級(jí)頁面打開后，再次刷新，就會(huì)出現(xiàn)現(xiàn)象問題原因刷新頁面時(shí)訪問的資源在服務(wù)端找不到，因?yàn)樵O(shè)置的路徑不是真實(shí)存在的路徑。 1. 問題描述利用vue-route結(jié)合webpack編寫了一個(gè)單頁路由項(xiàng)目，運(yùn)維協(xié)助在服務(wù)器端配置nginx。部署完成后，訪問首頁沒問題，從首頁里打開二級(jí)頁面沒問題，但是所有的二級(jí)頁面打開后，再次刷新...

Euphoria 2019-08-26 18:18 評論0 收藏0
42. Vue、React 等前端項(xiàng)目部署，刷新 404 問題解決方案

摘要：發(fā)現(xiàn)路徑下是靜態(tài)文件的目錄，不是的目錄沒有文件，就會(huì)規(guī)則，返回這樣瀏覽器拿到之后，開始加載其中的前端路由部分這時(shí)候就會(huì)在前端路由中找到匹配規(guī)則同理也可以寫在前端路由中了首發(fā)于我的github博客, 歡迎關(guān)注nginx 匹配的 try_file 與前端路由的優(yōu)先級(jí)問題場景描述: 訪問www.abc.com，之后點(diǎn)擊界面里面的logout，前端路由處理，跳轉(zhuǎn)到www.abc.c...

caiyongji 2019-07-25 14:38 評論0 收藏0
addRoutes爬坑記

摘要：簡介用動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制，是一個(gè)很的方案不是么初始路由只有登錄頁，根據(jù)用戶的查詢對應(yīng)的權(quán)限，然后，將獲取到的菜單數(shù)據(jù)放入和瀏覽器緩存中。 addRoutes簡介用動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制，是一個(gè)很nice的方案不是么？初始路由只有登錄頁，根據(jù)用戶的id查詢對應(yīng)的權(quán)限，然后addRoutes，將獲取到的菜單數(shù)據(jù)放入vuex和瀏覽器緩存中。動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 r...

draveness 2019-08-22 16:39 評論0 收藏0