一、路由中有三个基本的概念 route, routes, router。
1、route 是一条路由，如：fruit按钮——>水果内容；food按钮——>食品内容。
2、routes 是一组路由 ，把每一条路由组合起来，行程一个数组，[{}fruit按钮——>水果内容},{food按钮——>食品内容}]。
3， router 是一个机制，相当一个管理者，用来管理路由。由于routes只是定义了一组路由，它放在这里是静止的，当真正来
了请求，比如：当用户点击 frui t按钮的时候，怎么办？这时router 就会起作用，它到routes 中去查找，去找到对应的 fruit
内容，所以页面中就显示了 home 内容。
二、 vue-router中的路由也是基于上面的内容来实现
vue中路由实现，页面中所有内容基本都是组件化的，我们只要把路径和组件对应起来，然后在页面中将组件渲染出来。
1， 页面实现（html模版中）
在vue-router中, 定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分， 定义显示部分，就是点击后，区配的内容显示在什么地方。 还有一个非常重要的属性 to，定义点击之后，要跳转到哪里去， 如：Home
2， js 中配置路由
首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component.
path指路径，component 指的是组件。如：{path:’/home’, component: home}
这里有两条路由，组成一个routes:
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({ routes // routes: routes 的简写 }) 配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
const app = new Vue({ router }).$mount('#app')
