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 条评论) |