vue-router是官方提供的路由工具库。
将单页程序分割为各自功能合理的组件或者页面，路由起到连接单页程序中各页面之间的链条。
安装
vue-router是一个Vue插件，需要在Vue全局引用中通过Vue.use()接入到Vue实例中。
路由配置
vue-router配合组件形成各种的"页面"。页面是一个抽象的概念，用于划分场景，组件是页面在Vue的具体实现方式。
新建一个js文件专门配置路由（方便我们维护）：
导出一个VueRouter实例，将path路由指定组件路径，base:_dirname是设置我们的基路径。
创建VueRouter实例时用了mode：history的参数。意为使用history模式，该模式利用history.pushState API来完成URL的跳转还无需重新加载界面。如果不使用history模式，当访问home的时候地址就会变为：
http://localhost/#home
反之为：
http://localhost//home
这就是history模式和hash模式的区别了，其实有三种模式(⊙o⊙)…
跑远了跑远了。。。
接着说component指定组件，name是我们用的“命名路由”，就是通过路由的名称取代url的直接引用，这样如果变更可以最简化我们的维护。
demo中我创建了猫狗鱼猪4个组件，都以这个结构创建
在<router-link>内通过名称引入路由需要向to属性传入一个对象显示声明路由的名称:
vue-router提供了两个指令来处理导航和自动渲染逻辑：
按照这个规则，我们在App.vue中修改页面，配置路由导航和渲染的视图组件。
finally，我们npm run dev跑一下
点击item会触发该item的router-link继而导航，渲染router-view组件展示，刚才点击了小猪组件，router-view渲染出了Pig.vue组件~
（￣︶￣）↗
