本文面向純粹的vue路由小白安吁，采用 head first的文風(fēng)，重點(diǎn)在于解釋清楚vue路由的基本形象滚躯，傳達(dá)路由的設(shè)計概念雏门。
注意，這不是一篇“參考手冊”掸掏，而是一篇幫助理解的文章茁影。
要學(xué)習(xí)Vue路由，首先要明白它是干嘛的丧凤。
如果你看了菜鳥教程的解釋募闲，它是這樣的：
Vue 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。通過 Vue 可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用（single page web application愿待，SPA）浩螺。
正常人（比如我）該有的反應(yīng)：這說的啥玩意？
后來你才會知道它要表達(dá)的意思是仍侥，點(diǎn)擊一個鏈接<a>：
正常操作：等待服務(wù)器響應(yīng)要出，刷新頁面更新內(nèi)容。
vue路由操作：甚至不用理會服務(wù)器农渊，秒更新內(nèi)容患蹂。
所以說，Vue路由可以通過交互工具（比如按鈕）砸紊，在網(wǎng)站的不同地址上跳來跳去传于，但就是不用等待服務(wù)器！
沒有等待響應(yīng)的過程醉顽，用戶體驗(yàn)一級棒沼溜。
讀到這里你就應(yīng)該大呼：這不科學(xué)！沒有服務(wù)器的新數(shù)據(jù)游添，瀏覽器刷新個啥玩意系草！
說得好，這正是vue路由的神奇所在唆涝！
接下來類比餐廳點(diǎn)餐過程找都，開始路由的學(xué)習(xí)。
我們訪問一個網(wǎng)站石抡，就好比去一家餐廳吃飯：
要得到菜品檐嚣，就得在菜單里點(diǎn)來點(diǎn)去；要得到頁面，就得在網(wǎng)站地址上跳來跳去嚎京。
要點(diǎn)菜嗡贺，首先要有菜品；要跳地址鞍帝，首先要有目的地诫睬；
如果目的地是一個新地址的頁面，那么肯定要刷新頁面了帕涌，但這不是我們想看到的摄凡，那怎么辦呢？
辦法就是：讓它表面上是一個新地址蚓曼，暗地里是個早就下載完的組件亲澡！
結(jié)果：表面上看，地址變了纫版，頁面沒刷新但更新了床绪；實(shí)際上，就是換了個組件其弊。
所以我們先整個最簡單的菜品（組件）出來：
const tofu = { template: '<h1>ToFu</h1>' }
const water = { template: '<h1>water</h1>' }
代碼的意思是：我要聲明一個組件癞己，它叫<tofu >
template：模板，最終顯示的的HTML梭伐。好比菜單上的照片痹雅，<驢打滾>到底是個啥？一看圖片糊识，就是個米面糕點(diǎn)绩社；同理，<tofu >是個啥玩意技掏？一看template铃将，其實(shí)它就是：<h1>ToFu</h1>
這樣一個組件就OK啦项鬼。
下一個問題哑梳，你不認(rèn)識<驢打滾>，服務(wù)員當(dāng)然也不認(rèn)識绘盟，那么怎么辦呢鸠真？于是在用戶看不到的地方，老板（就是你）寫了個對應(yīng)表：
驢打滾 = 米面糕點(diǎn)龄毡，
魚香肉絲 = 豬肉蘿卜絲吠卷，
翡翠白玉湯 = 豆腐白菜
同理，Vue也需要個對應(yīng)表才能知道用戶要去的地址沦零，對應(yīng)啥組件祭隔。于是就有了路由規(guī)則：
const routes = [
{path: '/tofu', component: tofu},
{path: '/water', component: water}
]
path：瀏覽器端的地址路徑；
component： 對應(yīng)的組件路操；
OK疾渴，表面菜單和私下菜單都完成了千贯，現(xiàn)在只要找個熱情的服務(wù)員就可以開工了，在Vue中也是如此搞坝。但我們不要普通服務(wù)員（Vue實(shí)例）搔谴，我們要熱情的專門干這事的服務(wù)員（VueRouter實(shí)例）：
創(chuàng)建VueRouter的 router 實(shí)例：
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
routes ，等同于 routes:routes桩撮，意思是：把菜名對應(yīng)表拍服務(wù)員臉上交給他敦第。
萬事具備，只欠東風(fēng)店量。員工需要工作場所芜果，同理，router也需要工作工作場所融师。
HTML：
<div id="food_store">
</div>
id 是餐廳名字师幕，只有在該div內(nèi)服務(wù)員router才會為了薪資而工作。
服務(wù)員還沒去過你的餐廳呢诬滩，需要你帶它走一遭霹粥，同理，router 也不知道自己要在哪里干活疼鸟，需要掛載在Vue實(shí)例（工作場所）下：
const food_store = new Vue({
el: '#food_store', //確認(rèn)餐廳名字
router //把服務(wù)員丟到該餐廳
})
等同于：
const food_store = new Vue({
router
}).$mount('#food_store')
OK后控，這樣一家前端餐廳的運(yùn)作機(jī)制就建成啦。
接下來就是顧客點(diǎn)餐部分空镜，即HTML中router的使用浩淘。
等一下，我們可是合法營業(yè)吴攒！要想開店得有相關(guān)部門批準(zhǔn)张抄，同理，要想招router干活洼怔，得引入相關(guān)Vue組件署惯。
在<head>中引入組件：
<head>
<script src="js/vue.min.js" ></script>
<script src="js/vue-router.js" ></script>
</head>
js是我的文件夾名稱，你們可以看著修改镣隶。
接下來极谊，上菜單，也就是選擇頁面安岂。該菜單由<router-link>組件來替代：
<div id="food_store">
<router-link to="/tofu">豆腐</router-link>
<router-link to="/water">水</router-link>
</div>
<router-link>： 使用我轻猖，表明你需要路由跳轉(zhuǎn)！
to屬性：我指定跳轉(zhuǎn)地址（菜名）域那。
恭喜你咙边，我們的服務(wù)員router對照了菜名表，拿到了正確的菜品，上菜败许！
等等友瘤，服務(wù)員似乎出現(xiàn)了一點(diǎn)小麻煩：我們?yōu)g覽器餐廳的位置是可以隨便坐的，你得告訴服務(wù)員你希望菜放哪張桌檐束。同理辫秧，你得告訴瀏覽器，得到的組件放哪里被丧。
這很簡單盟戏，方法是使用<router-view>：
<div id="food_store">
<router-link to="/tofu">豆腐</router-link>
<router-link to="/water">水</router-link>
<router-view></router-view>
</div>
<router-view>：我是得到的新組件，把我放在任何合法的（在掛載點(diǎn)下的）甥桂，你希望我出現(xiàn)的位置柿究。
祝賀你！一家沒有等待上菜時間的瀏覽器餐廳從此就可以開始營運(yùn)啦黄选！
記得經(jīng)常寫信給我蝇摸，告訴我你的餐廳是否火爆營業(yè)！
