從後端到前端之Vue（五）小試路由
一開始我還以為vue的路由只能用在工程化的專案裡面呢，然後研究了一下才發現，在指令碼化裡面也是可以用的。其實呢不管在哪裡用，把原理研究明白就對了。
一、 官網demo
這裡不得不吐槽一下官網，寫的不清不楚的，在哪裡使用都沒有說清楚，幾行程式碼一句話就輕飄飄的交代完事了，剩下的事情還得自己研究，比如 HTML5 History API 是怎麼回事。這裡又涉及了一個問題，想要用好vue，必須的基礎是要先掌握的，因為vue的官網教程裡面不會管這些基礎知識的。
先看官網的程式碼：
1 const NotFound = { template: '<p>Page not found</p>' }
2 const Home = { template: '<p>home page</p>' }
3 const About = { template: '<p>about page</p>' }
4
5 const routes = {
6 '/': Home,
7 '/about': About
8 }
9
10 new Vue({
11 el: '#app',
12 data: {
13 currentRoute: window.location.pathname
14 },
15 computed: {
16 ViewComponent () {
17 return routes[this.currentRoute] || NotFound
18 }
19 },
20 render (h) { return h(this.ViewComponent) }
21 })
很簡單吧就這麼幾句，浪費了我好多時間才研究明白。恩，好吧還有一個地方每太明白。
首先定義了三個“常量”，就是不能改的那種變數，代表三個頁面，或者說是三個模板。分別是404、首頁和關於我們。
然後定義了一個路由規則，其實就是一個json，也可以理解為是一個實體類。Key代表url的地址後面的路徑和檔名，後面的是我們的真實頁面，也就是第一行定義的三個常量。
然後就是常見的vue的例項了，首先需要一個div與之對應，然後是data返回url上面的地址，然後ViewComponent 是根據url地址返回對應的模板（頁面）。
最後是render 。大概是實現繫結div的功能吧。
根據這個意思補充了一個頁面
1 <body>
2 <span onclick="myURL('/')">首頁</span>
3 <span onclick="myURL('/about')">關於</span>
4 <div id="app"></div>
5 </body>
然後呢，執行網頁顯示 Page not found 404 ，看來路由還是起作用了。那麼home和about要怎麼出來呢？
二、HTML5 History API
首先要補充一下 HTML5 History API的相關知識，如果已經掌握了那麼請略過。
HTML5 History API提供了一種功能，能讓開發人員在不重新整理整個頁面的情況下修改站點的URL。這個功能很有用，例如通過一段JavaScript程式碼區域性載入頁面的內容，你希望通過改變當前頁面的URL來反應出頁面內容的變化，這時該功能可以派上用場。
我們可以用 history.pushState(null, null, ‘about’); 來改變url地址，這種方式只是單純的修改地址裡的url，而不會向伺服器提交，這樣頁面就不會被重新整理，我們才有機會執行vue的程式碼。
然後呢，頁面當然是不會有啥變化的，因為vue是資料驅動，我們的資料改變了嗎？並沒有，我們只是改變了一下url。這個vue似乎沒有對rul做監聽，或者是我還不知道怎麼讓vue去監聽url的變化，總之我們先自己改變資料，然後再去研究vue有沒有辦法去監聽url。
我們在寫一行修改資料的程式碼route.currentRoute = window.location.pathname就可以了。
最後加一個簡單的導航，執行上面兩行js程式碼。
1 <span onclick="myURL('/')">首頁</span>
2 <span onclick="myURL('/about')">關於</span>
3
4 function myURL(name) {
5 history.pushState(null, null, name);
6 route.currentRoute = window.location.pathname;
7 }
三、按了F5怎麼辦？
按F5會重新整理頁面，如果這時候url位址列是 “/about” ，那麼就會向伺服器提交這個網址，很顯然會出現伺服器的404頁面。因為伺服器網站裡面並沒有這個地址。那麼怎麼辦呢？目前想到的辦法就是修改網站的404頁面。比如IIS，可以到IIS裡改一下，把我們做的這個router.html設定為404的響應頁面，這樣按F5就沒事了。
當然這種方式並不是太好的選擇，只是一種臨時的方法。應該會有更好的方法吧。沒事不急慢慢學。
這種方式還支援直接在瀏覽器的位址列裡面輸入 http://127.0.0.1:8000/about 也是可以正常執行的。只需要注意一下vue.js的引用地址確保能夠正確載入js檔案即可。
那麼如果位址列裡輸入 http://127.0.0.1:8000/aboutss 呢？當然是vue設計的404模組了。
不過還有一個問題，那個 const About 要怎麼改？這種簡單的模板沒辦法做複雜應用的呀。也許只有在工程化的專案裡，路由才能發揮最大的作用吧。
&n