一開始我還以為vue的路由只能用在工程化的項目里面呢，然后研究了一下才發現，在腳本化里面也是可以用的。其實呢不管在哪里用，把原理研究明白就對了。
一、 官網demo
這里不得不吐槽一下官網，寫的不清不楚的，在哪里使用都沒有說清楚，幾行代碼一句話就輕飄飄的交代完事了，剩下的事情還得自己研究，比如 HTML5 History API 是怎么回事。這里又涉及了一個問題，想要用好vue，必須的基礎是要先掌握的，因為vue的官網教程里面不會管這些基礎知識的。
先看官網的代碼：
const NotFound = { template: '<p>Page not found</p>' }const Home = { template: '<p>home page</p>' }const About = { template: '<p>about page</p>' }const routes = { '/': Home, '/about': About}new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) }})很簡單吧就這么幾句，浪費了我好多時間才研究明白。恩，好吧還有一個地方每太明白。
首先定義了三個“常量”，就是不能改的那種變量，代表三個頁面，或者說是三個模板。分別是404、首頁和關于我們。
然后定義了一個路由規則，其實就是一個json，也可以理解為是一個實體類。Key代表url的地址后面的路徑和文件名，后面的是我們的真實頁面，也就是第一行定義的三個常量。
然后就是常見的vue的實例了，首先需要一個div與之對應，然后是data返回url上面的地址，然后ViewComponent 是根據url地址返回對應的模板（頁面）。
最后是render 。大概是實現綁定div的功能吧。
根據這個意思補充了一個頁面
<body> <span onclick="myURL('/')">首頁</span> <span onclick="myURL('/about')">關于</span> <div id="app"></div> </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。
新聞熱點
疑難解答
圖片精選
