從後端到前端之Vue（五）小試路由

時間 2019-11-05

原文原文鏈接

　　一開始我還覺得vue的路由只能用在工程化的項目裏面呢，而後研究了一下才發現，在腳本化裏面也是能夠用的。其實呢無論在哪裏用，把原理研究明白就對了。html

1、官網demo

　　這裏不得不吐槽一下官網，寫的不清不楚的，在哪裏使用都沒有說清楚，幾行代碼一句話就輕飄飄的交代完事了，剩下的事情還得本身研究，好比 HTML5 History API 是怎麼回事。這裏又涉及了一個問題，想要用好vue，必須的基礎是要先掌握的，由於vue的官網教程裏面不會管這些基礎知識的。vue

　　先看官網的代碼：json

 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 })

　　很簡單吧就這麼幾句，浪費了我好多時間才研究明白。恩，好吧還有一個地方每太明白。瀏覽器

　　首先定義了三個「常量」，就是不能改的那種變量，表明三個頁面，或者說是三個模板。分別是40四、首頁和關於咱們。服務器

　　而後定義了一個路由規則，其實就是一個json，也能夠理解爲是一個實體類。Key表明url的地址後面的路徑和文件名，後面的是咱們的真實頁面，也就是第一行定義的三個常量。app

　　而後就是常見的vue的實例了，首先須要一個div與之對應，而後是data返回url上面的地址，而後ViewComponent 是根據url地址返回對應的模板（頁面）。網站

　　最後是render 。大概是實現綁定div的功能吧。this

　　根據這個意思補充了一個頁面url

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要怎麼出來呢？spa

2、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 }

3、按了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 要怎麼改？這種簡單的模板沒辦法作複雜應用的呀。也許只有在工程化的項目裏，路由才能發揮最大的做用吧。