Vue-Router 入门与提高实战示例
关于路由
路由(routing)是指从源到目的地时,决定端到端路径的决策过程。 对于VueRouter而言,路由就是根据一个请求路径选中一个组件进行 渲染的决策过程:
VueRouter包括三个主要组成部分 —— VueRouter、router-view和 router-link:
- VueRouter :路由器类,根据路由请求在路由视图中动态渲染选中的组件
- router-link :路由链接组件,声明用以提交路由请求的用户接口
- router-view:路由视图组件,负责动态渲染路由选中的组件
路由器完全依赖于其路由表进行路由决策,因此,在创建路由器实例时,我们需要 对所有可能的路由(从路径向组件的映射关系)进行配置。
Hello, VueRouter
开发一个VueRouter版的hello,world只需要四步:
1、创建路由器实例
路由器完全依赖于路由表来分发路由请求,因此创建路由器实例时,需要使用routes配置项来声明请求路径(path)和组件(component)的对应关系 —— 记录这一映射关系的对象,在VueRouter中被称为路由记录(RouteRecord)。 路由器将根据routes路由记录数组来构造路由表。
例如,下面的代码创建了包含两条路由及记录的路由器实例router:
const router = new VueRouter({
routes:[
{ path:'/', component: EzHome},
{ path:'/about', component: EzAbout}
]
})
当请求路径/时,路由器将选中组件EzHome;当请求路径/about时,路由器 将选中组件EzAbout。
2、将路由器注入Vue实例
如果在一个Vue实例的模板中需要使用router-link和router-view组件,我们需要首先向这个Vue实例注入路由器对象,因为这两个组件都依赖于路由器对象:
在创建Vue实例时,使用router配置项将路由器对象注入Vue实例的$router属性,例如:
const router = new VueRouter({...})
const vm = new Vue({ router: router })
console.log(vm.$router) //输出router
3、声明路由出口
路由视图组件(router-view)为路由器($router)提供了所选中组件 的渲染出口。在模板中,使用标签<router-view>声明路由视图元素。
例如,下面示例在模板中声明了一个路由视图:
<router-view></router-view>
声明路由请求接口
路由链接组件(router-link)为用户提供了提交路由请求的交互接口。 使用to属性来声明链接组件的目标路径。当用户点击链接组件时,组件 向路由器提交向目标路径的路由请求。在模板中,使用<router-link> 标签声明路由链接元素。
例如,下面的示例声明了一个目标路径为/about的路由链接:
<router-link to="/about">ABOUT</router-link>
路由链接组件默认渲染为一个a元素,因此在视图DOM中,上面的模板对应于DOM结构:
<a href="...">ABOUT</a>
路由链接组件的激活样式类
成组的链接组件用来做组件的导航再合适不过了。VueRouter贴心地为选中的路由链接元素添加了激活样式类来帮助我们醒目地展示激活的链接:
router-link-active
激活的router-link组件自带样式类router-link-active。因此我们可以利用 这个样式类来为赋予选中的链接组件不同的外观:
是否为链接组件添加router-link-active样式类的默认判别规则是:链接组件的 目标路径(to属性值)是否包含当前激活路由的路径($route.path)。因此在上图中,当激活BLOGS链接元素(目标路径:/blogs)时,HOME链接元素(目标路径:/)也被添加了router-link-active 样式类 —— 路径/包含了所有以/开头的路径!
有两个方案解决这一问题:
- 为目标路径为/的链接组件应用exact属性,要求VueRouter只有在精确匹配 (to属性值与$router.path完全相等)时才添加router-link-active样式类
- 使用router-link-exact-active样式类
router-link-exact-active
只有当链接组件的目标路径精确匹配活动路由的路径时,链接组件才会被添加router-link-exact-active样式类:
使用命名路由
在配置路由记录时,也可以利用name属性,将其声明为命名路由。 例如,下面的路由记录声明了一条名为about的命名路由:
{path:'/about',component:EzAbout,name:'about'}
router-link组件也支持使用名称来声明目标路由。不过,我们需要将to属性使用v-bind指令绑定到对象形式的字面量,否则将被视为 字符串。
例如,下面的模板使用对象字面量设置链接组件的to属性,根据之前 的路由记录,下面的三种写法是等效的:
<router-link to="/path">ABOUT</router-link>
<router-link :to="{name:'about'}">ABOUT</router-link>
<router-link :to="{path:'/about'}">ABOUT</router-link>
这种对象形式的目标路由声明,在VueRouter里被称为定位对象(Location)。 路径形式的路由请求,也将被转化为定位对象再进行路由匹配。
路由匹配算法概述
路由器实例化时,根据routes配置项声明的路由记录数组,构造两张核心路由表:pathMap和nameMap,分别以路径(例如:/about)和 路由名(例如:about)为键,以规范处理后的路由记录为值,来实现路由 的快速匹配。
当路由器接收到一个路由请求时(例如,点击router-link组件),路由器 将根据请求的定位对象是否包含name属性,分别查找nameMap 和pathMap这两张路由表来进行路由查找:
很显然,使用nameMap表进行命名路由的匹配只需要一步,而使用pathMap进行路径匹配则 (最坏情况下)需要遍历整个路由表,利用每一个路径模式来尝试匹配请求路径。因此在可能 的情况下,都应当使用命名路由。
路由重定向和别名
也可以在路由记录中声明从一个路径到另一个路径的映射—— 路由重定向。 例如,下面的路由记录声明了从路径/archives向路径/blogs的重定向:
{path: '/archives' , redirect:'/blogs'}
对于上例的路由配置,当路由器匹配了对路径/archives的请求时,将再度 继续执行对路径/blogs的匹配:
重定向路由记录的声明也支持使用命名路由。例如,下面的示例将路径/archives 重定向到命名路由blogs —— 对于命名路由,我们只能采用定位对象的写法:
{path:'/archives', redirect:{name:'blogs'}}
路径别名
别名(alias)用来为一个路径创建另一个访问点。例如,下面的路由记录 为路径/blogs创建了别名路径/:
{path:'/blogs',component: EzBlogs , alias:'/archives'}
当路由器匹配了对根路径/的路由请求时,不会再继续匹配路径/blogs, 而是直接根据所选中路由记录的声明,构造路由信息对象,渲染EzBlogs组件。
redirect vs. alias
重定向(redirect)和别名(alias)最大的区别在于:重定向请求的路径 和实际激活的路径是不同的,而别名的请求路径和激活路径是一致的:
更多的vue-router实战示例内容可以到汇智网(www.hubwiz.com,本文内容来自汇智网,边学边练,所学所见。
- Spring(一)Spring的第一滴血
- Flume(一)Flume原理解析
- 我所理解的Remoting (2) :远程对象的生命周期管理[下篇]
- struts2(六)之ognl表达式与ActionContext、ValueStack
- Windows8异步编程的注意事项
- CSS魔法堂:深入理解line-height和vertical-align
- Gradle 10分钟上手指南
- gradle项目中profile的实现
- 欧盟推出“数字经济税收制度”优化了税收制度,却影响区块链行业
- CSS魔法堂:你一定误解过的Normal flow
- ASP.NET输出JSON格式数据
- haproxy 新手上路
- 区块链是如何保护交易隐私的?eprint这篇论文告诉你答案
- gradle项目中资源文件的相对路径打包处理技巧
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 院长智能部署Frp内网穿透---支持多系统
- dotnet OpenXML 元素 cNvPr NonVisual Drawing Properties 重复 id 标识处理
- Magicodes.IE之花式导出
- vue列表点击切换颜色
- JVM加载过程科普
- 我没学过计算机,是怎么接了四个私活还挣了两个 iPad 的?
- Helm安装Prometheus Operator
- 【每日一题】【vue2源码学习】vue如何检测数组的变化
- JavaScript 实现输入框内容一键复制(附上 Vue 3 实现方式)
- python 迭代器/iterator与生成器/generator的区别
- CSS 实现文本超出容器范围用省略号显示(单行+多行)
- ESP8266和ROS收发消息读取模拟量控制LED亮度
- 纯 CSS 实现下拉菜单尖角图标(实心+空心)
- 3分钟短文:书接上回,Laravel数据库迁移的那些个小技巧
- 解密 Docker 挂载文件,宿主机修改后容器里文件没有修改