以上幾個教程里所使用的測試vue項目
(demo1)均是十分簡單的項目，完全沒涉及到router路由或者其他的知識，今天一位小哥將自己的項目部署到nginx后，發現某些頁面在訪問的時候偶爾會出現404找不到，因此找到我，共同解決了這個問題。在解決過程中，發現這其實也是個老生常談的問題，最主要就是vue項目的路由采用了history模式，才導致了這個問題。
既然問題已經找到了，那么就應該探究下為什么會出現這個問題：
-
1.首先我們先理解一下SPA(單頁Web應用)的概念：
由于我們是使用vue搭建的
單頁web應用(SPA)，就是只有一個Web頁面的應用，是在打開頁面的時候加載單個HTML頁面(index.html)，在用戶與程序交互的時候動態獲取數據(axios)的Web頁面程序。
單頁面應用程序：
只有在第一次才會向后臺請求頁面，之后的每次請求都是去獲取到必要的數據，由頁面上的js解析數據后動態展示到頁面上傳統單頁面程序：
每次頁面的跳轉都是去服務器請求頁面因此，單頁面應用程序的優勢就體現出來了：
減少請求的密度，加快了頁面的響應速度，降低了服務器上的壓力，有著更好的用戶體驗，讓用戶在web app上也能感受到native app的流暢。
-
2.引出路由
既然是單頁面程序，那么我們看到的頁面跳轉是什么情況呢？一個頁面怎么會來回跳轉呢？此時就理所應當的引出vue中的重中之重，vue-router（單頁面應用程序的路徑管理器）。
vue的單頁面應用是基于路由+組件的，路由用于設定訪問路徑，并且將路徑與組件進行連接；在傳統的多頁面應用中，是使用一些超鏈接<a></a>來進行頁面跳轉與切換的；而在vue-router中，不是頁面的切換，而是組件的切換，所以，路由的本質就是 建立起url和組件之間的映射關系
-
vue-router的工作原理是什么呢？
SPA(single page application):單頁面應用程序，其中只有一個完整的頁面(index.html)；它在加載頁面的時候，不會加載所有頁面，而是只更新某個指定的容器中的內容。單頁面應用程序的核心之一就是：更新視圖而不重新請求頁面；vue-router在實現單頁面前端路由的時候，提供了兩種方式：Hash模式與History模式，根據**mode參數來自由選擇采用什么方式。 - Hash模式
vue-router默然采用的就是Hash模式---采用URL的Hash來模擬一個完整的URL，于是當URL發生改變的時候，頁面不會重新加載。hash(#)是URL的錨點，代表的是網頁中的一個位置，單單改變#后面的部分，瀏覽器只會滾動到相應的位置，而不會去后端請求網頁資源，也就是說#是用來指導瀏覽器動作的，對服務器端完全不起作用，HTTP請求中也不包括#；同時每一次改變#后面的部分，都會在瀏覽器的訪問歷史中增加一個記錄，當使用瀏覽器的“后退”按鈕的時候，就可以返回上一個位置；所以說Hash模式是使用錨點值的改變，根據不同的值，渲染指定DOM元素的不同數據。
- Hash模式
- history模式
由于Hash模式中會在URL上自帶#，如果不想要很丑的#的話，我們可以使用路由的history模式，只需要在配置路由規則的時候，加入值：mode:'hostory',這種模式充分利用了history.pushState API來完成URL跳轉而無需重新加載頁面。
- history模式
//main.js文件中
const router = new VueRouter({
mode: 'history',
routes: [...]
})
當你在使用history模式的時候，URL就會像是正常的URL，沒有#存在，比較美觀。不過這種模式如果不加以配置的話，會有一個深坑，深坑出現的原因簡單介紹一下：
當我們使用history模式的時候進行頁面跳轉的時候，其vue-router原理是使用HTML5的新接口pushState和replaceState,這兩個接口的最大的特點就是改變URL地址，但卻不刷新頁面，注意！！！僅僅改變網址，網頁不是真正的跳轉了，也不會獲取到新的資源，本質上，網頁還是停留在原來的頁面(index.html)。
舉個栗子??：
打開首頁后，你的URL顯示www.xxx.com/home，這時候能正常顯示，沒問題，此時你進入到注冊頁，URL此時是www.xxx.com/home/reg，這個時候，當你點擊刷新時，瀏覽器就會拿著當前的地址www.xxx.com/home/reg去后臺請求該資源，后臺肯定沒有對應的資源，所以就會報404找不到，這樣就很明了了！該怎樣解決呢？
栗子??中出現的問題，我們可以想想一下，假如一旦瀏覽器向服務器請求找不到404時，就還跳回到最初的index.html頁面，頁面再根據URL上的路徑跳轉到對應的組件里不就好了嘛！事實上，我們就是這么取解決的，在服務器上進行以下相關配置即可解決該問題！
vue-router history后端配置例子
至此，還問題的前因后果已經講清楚了，以后再遇到類似的問題也會有解決思路了，這樣就很好，希望以后一直堅持住！
頁面知識參考自:
https://blog.csdn.net/weixin_45111741/article/details/101028344
https://blog.csdn.net/sinat_17775997/article/details/80688397
