Vue路由一:简单路由

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. 注册根实例:将路由注入到 根实例中,必须将路由注入到根实例中,不然会报错的。

看下页面:

发表评论
留言与评论(共有 0 条评论)
   
验证码:

相关文章

推荐文章

'); })();