【前端新手日記】Vue.js學習筆記(3)-Vue Router－文科少女學程式

最近為了完成身為蔡依林粉絲的巨作(？)
好一陣子沒寫文章了，深深覺得不妙，所以趕快寫一篇壓壓驚~~
(謎之音：你明明就是又被考倒了吧！！)
不管啦，就是該會的東西，沒有好好記下來，
所以好好地寫一篇筆記文吧～～～

什麼是Vue Router？

Vue Router是由前端實作的路由，所以有了它，就可以透過前端操控路由，打造一個前端SPA。

以前路由都會先經過網路，並透過後端伺服器，進行請求回應的動作，最後才能顯示這個路由指定的頁面，
但是透過Vue Router，就不一定需要網路，也能渲染這個路由指定的頁面。

使用Vue Router時，當變更路由，會進行以下的流程：
啟動Vue Router=>更改網址=>載入對應的component=>渲染顯示頁面
但是當有讀取、修改、新增資料的動作時，就需要進一步透過網路，向後端伺服器發送請求(也就是API的部分了)

Vue Router使用的起手式
對Vue Routerr有個大致上的理解後，再來進一步看看要怎麼使用吧！
當你已經開了一個vue專案後，可以透過以下指令安裝Vue Router
vue add router
在安裝的過程中，會出現是否選擇History Mode的選項。
若選擇否，則會使用Hash Mode。

這兩種模式的差異，等等再來看，建議先選擇Hash Mode。

順利安裝完畢後，還可以發現到幾個不同的地方
1. 連結多了#符號
==>

2. 專案裡多了幾個資料夾，分別是router、views

router資料夾：裡面的index.js檔案，主要作用是設定路由。
views資料夾：擺放可以被index.js使用的頁面元件。通常一個路由會對到一個views裡面的component。

如何設定路由？
想要設定路由，可以從router資料夾裡面的index.js進行設定。

將這個檔案打開後，可以看到以下的這些內容。
在routes陣列裡面，可以設定路由，而設定的方法就是寫下path(網址)、name(路由名稱)、component(對應到的元件名稱)。

而App.vue這個檔案中的<router-veiw/>也就是透過view-router渲染之元件所顯示的位置。

router-link的用途則是與<a herf="">標籤有點相似，但是是透過View Router去尋找對應連結。

Hash Mode 和 History Mode
1. Hash Mode
使用Hash Mode時，當連結有變動，會觸發onhashchange事件，
vue就會渲染對應的component。
在這個模式下，瀏覽器會向根目錄發出請求，再透過#分辨不同的路由，且不會重新載入。
且每當改變#後面的部分時，都會在瀏覽器的訪問歷史中增加紀錄，
就可以透過上一頁的按鈕，重返上一頁。
2. History Mode
使用History Mode時，雖然網址不會顯示#符號，看起來是常見的網址，
但若未和進行伺服器或CDN的設定，在對外佈署後，
就會發生手動變更網址，或是重整頁面時，連到404的錯誤頁面。

為什麼會發生這個狀況？
因為用前端框架做出來的SPA網頁只有首頁，其他頁面則是需要透過JavaScript動態渲染。
但是要拿到JavaScript的內容，就必須從首頁開始載入。可是在History Mode下，是透過Vue幫我們設定好的開發環境，再以window.history.pushState()來實現新增歷史紀錄，以及不會重載的效果。由於使用到的是HTML5 historyAPI，會觸發HTTP請求，造成脫離Vue的開發環境。因此在這個情況下，如果沒做額外的設定的話(例如在server有相對應的path設定)，就會發生這樣的問題。