本文面向纯粹的vue路由小白，采用 head first的文风，重点在于解释清楚vue路由的基本形象，传达路由的设计概念。
注意，这不是一篇“参考手册”，而是一篇帮助理解的文章。
要学习Vue路由，首先要明白它是干嘛的。
如果你看了菜鸟教程的解释，它是这样的：
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用（single page web application，SPA）。
正常人（比如我）该有的反应：这说的啥玩意？
后来你才会知道它要表达的意思是，点击一个链接<a>：
正常操作：等待服务器响应，刷新页面更新内容。
vue路由操作：甚至不用理会服务器，秒更新内容。
所以说，Vue路由可以通过交互工具（比如按钮），在网站的不同地址上跳来跳去，但就是不用等待服务器！
没有等待响应的过程，用户体验一级棒。
读到这里你就应该大呼：这不科学！没有服务器的新数据，浏览器刷新个啥玩意！
说得好，这正是vue路由的神奇所在！
接下来类比餐厅点餐过程，开始路由的学习。
我们访问一个网站，就好比去一家餐厅吃饭：
要得到菜品，就得在菜单里点来点去；要得到页面，就得在网站地址上跳来跳去。
要点菜，首先要有菜品；要跳地址，首先要有目的地；
如果目的地是一个新地址的页面，那么肯定要刷新页面了，但这不是我们想看到的，那怎么办呢？
办法就是：让它表面上是一个新地址，暗地里是个早就下载完的组件！
结果：表面上看，地址变了，页面没刷新但更新了；实际上，就是换了个组件。
所以我们先整个最简单的菜品（组件）出来：
const tofu = { template: '<h1>ToFu</h1>' }
const water = { template: '<h1>water</h1>' }
代码的意思是：我要声明一个组件，它叫<tofu >
template：模板，最终显示的的HTML。好比菜单上的照片，<驴打滚>到底是个啥？一看图片，就是个米面糕点；同理，<tofu >是个啥玩意？一看template，其实它就是：<h1>ToFu</h1>
这样一个组件就OK啦。
下一个问题，你不认识<驴打滚>，服务员当然也不认识，那么怎么办呢？于是在用户看不到的地方，老板（就是你）写了个对应表：
驴打滚 = 米面糕点，
鱼香肉丝 = 猪肉萝卜丝，
翡翠白玉汤 = 豆腐白菜
同理，Vue也需要个对应表才能知道用户要去的地址，对应啥组件。于是就有了路由规则：
const routes = [
{path: '/tofu', component: tofu},
{path: '/water', component: water}
]
path：浏览器端的地址路径；
component： 对应的组件；
OK，表面菜单和私下菜单都完成了，现在只要找个热情的服务员就可以开工了，在Vue中也是如此。但我们不要普通服务员（Vue实例），我们要热情的专门干这事的服务员（VueRouter实例）：
创建VueRouter的 router 实例：
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
routes ，等同于 routes:routes，意思是：把菜名对应表拍服务员脸上交给他。
万事具备，只欠东风。员工需要工作场所，同理，router也需要工作工作场所。
HTML：
<div id="food_store">
</div>
id 是餐厅名字，只有在该div内服务员router才会为了薪资而工作。
服务员还没去过你的餐厅呢，需要你带它走一遭，同理，router 也不知道自己要在哪里干活，需要挂载在Vue实例（工作场所）下：
const food_store = new Vue({
el: '#food_store', //确认餐厅名字
router //把服务员丢到该餐厅
})
等同于：
const food_store = new Vue({
router
}).$mount('#food_store')
OK，这样一家前端餐厅的运作机制就建成啦。
接下来就是顾客点餐部分，即HTML中router的使用。
等一下，我们可是合法营业！要想开店得有相关部门批准，同理，要想招router干活，得引入相关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>： 使用我，表明你需要路由跳转！
to属性：我指定跳转地址（菜名）。
恭喜你，我们的服务员router对照了菜名表，拿到了正确的菜品，上菜！
等等，服务员似乎出现了一点小麻烦：我们浏览器餐厅的位置是可以随便坐的，你得告诉服务员你希望菜放哪张桌。同理，你得告诉浏览器，得到的组件放哪里。
这很简单，方法是使用<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>：我是得到的新组件，把我放在任何合法的（在挂载点下的），你希望我出现的位置。
祝贺你！一家没有等待上菜时间的浏览器餐厅从此就可以开始营运啦！
记得经常写信给我，告诉我你的餐厅是否火爆营业！
