Vue路由一:简单路由
Vue中的路由一般指的是 vue-router 库。
- 什么是路由:
百度百科讲:路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。
可以看一下:

可以看到 首先是访问路由器,我们对目的地址主机的访问并不是之间访问到主机,而是访问的是路由,通过路由来分配。路由器根据你的请求,从路由表中查询出对应的地址进行定向与转发,将请求分配给目的地址。
例如 我们请求主机A:
从入口发送请求主机A 请求 ——> 路由接到请求,从路由表中查询到 请求对应的目的地址为 主机A ——> 转发请求到主机A ——> 我们访问到主机A。
由此可以看出来,路由是什么:
- 路由是请求的入口,是程序的入口。也是出口。
- 路由是源地址转发到目的地址的过程。
- 路由是源地址与目的地址之间分配与决策的过程。
Vue中的路由 也是一样的道理:

我们把入口 简单的定义为鼠标,导航栏为路由,目的地址为 页面A,B,C
- 通过鼠标点击导航栏中页面A的导航(产生请求,源地址),导航栏(路由)查找路由表获得对应的页面A地址(源地址与目的地址之间的分配与决策),显示页面A(定向并转发)。
源地址 ——> 路由 ——> 目的地址
看下 Vue 中的 简单路由:
借用一下 Vue官方教程中的例子,官方例子是用ES2015实现的,我对ES2015不怎么熟悉,改写成 js5的形式。

通过
:to 与 to 区别是
- :to 其实是 v-bind:to的缩写 绑定的是动态值,可以是变量。
- to 绑定的是 静态值,只能是字符串字面值,不能是变量。
Vue中所有v-bind:xxx 形式绑定的值 都是动态值。
当
为了更直观一些,给 router-link-active设置一个样式,router-link-active设置成功后,设置标签为蓝色高亮。

通过路由进行定向并转发到的目的地址(在这里是vue组件),将替换
例如:
我们通过路由选中的目的组件是 页面A组件

- 引入 Vue.js 和 vue-router.js库,vue-router.js就是vue的路由库。
- 注册俩个组件 Foo, Bar 。分别表示目的组件 页面A, 页面B。
- routes 是路由映射表,路由从路由映射表里面查找对应的目的组件。
path 的值 就是
4. 注册路由:创建一个 VueRouter实例router,并将路由映射表(routes)注入路由中。VueRouter就是我们所说的路由,映射表的查找,定向转发等路由的功能都是有VueRouter来实现的。
5. 注册根实例:将路由注入到 根实例中,必须将路由注入到根实例中,不然会报错的。
看下页面:
