Vue路由一：简单路由

Vue中的路由一般指的是 vue-router 库。

1. 什么是路由：

百度百科讲：路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。

可以看一下：

可以看到 首先是访问路由器，我们对目的地址主机的访问并不是之间访问到主机，而是访问的是路由，通过路由来分配。路由器根据你的请求，从路由表中查询出对应的地址进行定向与转发，将请求分配给目的地址。

例如 我们请求主机A：

从入口发送请求主机A 请求 ——> 路由接到请求,从路由表中查询到 请求对应的目的地址为 主机A ——> 转发请求到主机A ——> 我们访问到主机A。

由此可以看出来，路由是什么：

1. 路由是请求的入口，是程序的入口。也是出口。
2. 路由是源地址转发到目的地址的过程。
3. 路由是源地址与目的地址之间分配与决策的过程。

Vue中的路由 也是一样的道理：

我们把入口 简单的定义为鼠标，导航栏为路由，目的地址为 页面A,B,C

1. 通过鼠标点击导航栏中页面A的导航（产生请求，源地址），导航栏（路由）查找路由表获得对应的页面A地址（源地址与目的地址之间的分配与决策），显示页面A（定向并转发）。

源地址 ——> 路由 ——> 目的地址

看下 Vue 中的 简单路由：

借用一下 Vue官方教程中的例子，官方例子是用ES2015实现的，我对ES2015不怎么熟悉，改写成 js5的形式。

路由连接组件，

通过来实现简单的路由。会被渲染成 标签。 通过 to 属性指定目标地址，被渲染成标签，to属性被渲染成 标签中的 href属性，to属性的值则成为href属性的值，不过被添加了一个#字符到最开始处。

页面A

:to 与 to 区别是

1. :to 其实是 v-bind:to的缩写 绑定的是动态值，可以是变量。
2. to 绑定的是 静态值，只能是字符串字面值，不能是变量。

Vue中所有v-bind:xxx 形式绑定的值 都是动态值。

当 对应的路由匹配成功，将自动给渲染后的标签设置 class 属性值 .router-link-active

为了更直观一些，给 router-link-active设置一个样式，router-link-active设置成功后，设置标签为蓝色高亮。

路由视图组件

通过路由进行定向并转发到的目的地址（在这里是vue组件）,将替换组件为目的组件。也就是说 组件并不显示任何内容，其实就是一个占位标记，

例如：

我们通过路由选中的目的组件是 页面A组件,那么 组件 将被替换为 组件.

1. 引入 Vue.js 和 vue-router.js库，vue-router.js就是vue的路由库。
2. 注册俩个组件 Foo, Bar 。分别表示目的组件 页面A， 页面B。
3. routes 是路由映射表，路由从路由映射表里面查找对应的目的组件。

path 的值 就是