vue router 刷新404問題

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

摘要：問題描述單頁面應用的項目，設置模式為。可以跳轉但刷新了頁面，則顯示為。但是這種很丑，也不符合對的使用習慣。所以，需要使用另外一個叫模式來實現(xiàn)跳轉而無須重新加載頁面。服務器配置服務器配置

1. 問題描述

單頁面應用的vue項目，設置router模式為history?？梢蕴D但刷新了頁面，則顯示為404。

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

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

2. Apache服務器配置


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

3. nginx服務器配置

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/100802.html

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

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

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

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

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

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

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

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

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

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

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