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

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

可以看一下：

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

例如 我们请求主机A：

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

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

路由是请求的入口，是程序的入口。也是出口。

路由是源地址转发到目的地址的过程。

路由是源地址与目的地址之间分配与决策的过程。

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

我们把入口 简单的定义为鼠标，导航栏为路由，目的地址为 页面A,B,C通过鼠标点击导航栏中页面A的导航（产生请求，源地址），导航栏（路由）查找路由表获得对应的页面A地址（源地址与目的地址之间的分配与决策），显示页面A（定向并转发）。

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

看下 Vue 中的 简单路由：

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

路由连接组件，

通过

来实现简单的路由。

会被渲染成

标签。 通过 to 属性指定目标地址，

被渲染成

标签，to属性被渲染成

标签中的 href属性，to属性的值则成为href属性的值，不过被添加了一个#字符到最开始处。

页面A

被渲染成

页面A

:to 与 to 区别是

:to 其实是 v-bind:to的缩写 绑定的是动态值，可以是变量。

to 绑定的是 静态值，只能是字符串字面值，不能是变量。

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

当

对应的路由匹配成功，将自动给渲染后的

标签设置 class 属性值 .router-link-active

为了更直观一些，给 router-link-active设置一个样式，router-link-active设置成功后，设置

标签为蓝色高亮。

路由视图组件

通过路由进行定向并转发到的目的地址（在这里是vue组件）,将替换

组件为目的组件。也就是说

组件并不显示任何内容，其实就是一个占位标记，

例如：

我们通过路由选中的目的组件是 页面A组件

,那么

组件 将被替换为

组件.

引入 Vue.js 和 vue-router.js库，vue-router.js就是vue的路由库。

注册俩个组件 Foo, Bar 。分别表示目的组件 页面A， 页面B。

routes 是路由映射表，路由从路由映射表里面查找对应的目的组件。

path 的值 就是

中to 属性的值。component 的值是 目的组件的实例。component的值 对应的是 变量（组件的实例）而不是组件的名字。

4. 注册路由：创建一个 VueRouter实例router，并将路由映射表（routes)注入路由中。VueRouter就是我们所说的路由，映射表的查找，定向转发等路由的功能都是有VueRouter来实现的。

5. 注册根实例：将路由注入到 根实例中，必须将路由注入到根实例中，不然会报错的。

看下页面：