本文面向纯粹的vue路由小白，采用 head first的文风，重点在于解释清楚vue路由的基本形象，传达路由的设计概念。
注意，这不是一篇“参考手册”，而是一篇帮助理解的文章。
要学习Vue路由，首先要明白它是干嘛的。
如果你看了菜鸟教程的解释，它是这样的：
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用（single page web application，SPA）。
正常人（比如我）该有的反应：这说的啥玩意？
后来你才会知道它要表达的意思是，点击一个链接：
正常操作：等待服务器响应，刷新页面更新内容。
vue路由操作：甚至不用理会服务器，秒更新内容。
所以说，Vue路由可以通过交互工具（比如按钮），在网站的不同地址上跳来跳去，但就是不用等待服务器！
没有等待响应的过程，用户体验一级棒。
读到这里你就应该大呼：这不科学！没有服务器的新数据，浏览器刷新个啥玩意！
说得好，这正是vue路由的神奇所在！
接下来类比餐厅点餐过程，开始路由的学习。
我们访问一个网站，就好比去一家餐厅吃饭：
要得到菜品，就得在菜单里点来点去；要得到页面，就得在网站地址上跳来跳去。
要点菜，首先要有菜品；要跳地址，首先要有目的地；
如果目的地是一个新地址的页面，那么肯定要刷新页面了，但这不是我们想看到的，那怎么办呢？
办法就是：让它表面上是一个新地址，暗地里是个早就下载完的组件！
结果：表面上看，地址变了，页面没刷新但更新了；实际上，就是换了个组件。
所以我们先整个最简单的菜品（组件）出来：
const tofu = { template: 'ToFu
' }
const water = { template: 'water
' }
代码的意思是：我要声明一个组件，它叫
template：模板，最终显示的的HTML。好比菜单上的照片，<驴打滚>到底是个啥？一看图片，就是个米面糕点；同理，ToFu
这样一个组件就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：
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组件。
在
中引入组件：
js是我的文件夹名称，你们可以看着修改。
接下来，上菜单，也就是选择页面。该菜单由
豆腐
水
to属性：我指定跳转地址（菜名）。
恭喜你，我们的服务员router对照了菜名表，拿到了正确的菜品，上菜！
等等，服务员似乎出现了一点小麻烦：我们浏览器餐厅的位置是可以随便坐的，你得告诉服务员你希望菜放哪张桌。同理，你得告诉浏览器，得到的组件放哪里。
这很简单，方法是使用
豆腐
水
祝贺你！一家没有等待上菜时间的浏览器餐厅从此就可以开始营运啦！
记得经常写信给我，告诉我你的餐厅是否火爆营业！