vue-router 2.0 改变的内容
2.x 版本的 vue-router
相比之前的0.7.x版本,有很多破坏性改变:
通用 API 的修改
The old
router.go()
is nowrouter.push()
.新的
router.go
类似window.history.go()
: 接受一个数值作为参数在历史栈中导航新增的方法:
router.back()
router.forward()
路由配置
所有路由配置都通过一个单独的对象传到 Router
的构造函数。所以可用的选项,参见 configuration object's type declaration 。
routes
选项取代了 router.map()
。此外,路由配置现在用数组而不是用对象哈希表来作为数据结构。这保证了一致的匹配次序(对象键值枚举的次序是依赖游览器的)。
这里 是一个新的配置语法的例子.
以下的路由器实例化选项被作废了:
history
(被mode
取代)abstract
(被mode
取代)root
(被base
取代)saveScrollPosition
(被scrollBehavior
取代,后者用起来更加灵活,下面会提到)hashbang
(因为 hashbang 在Google爬站的时候不在需要,所以移除了此选项)transitionOnLoad
(因为 Vue 2.0 有显式的视觉表现过渡动画控制,所以此选项移除)suppressTransitionError
(因为钩子函数的系统的简化而移除)
新的 mode
选项取值为: (默认是 "hash"):
"abstract"
"hash"
"history"
在不支持 history.pushState
的浏览器中, 路由器会自动回退为 hash
模式.
下列方法已经作废:
router.map
(被routes
选项取代)router.beforeEach
(被beforeEach
选项取代,不过 beta2中有修改,见下面)router.afterEach
(被afterEach
选项取代,不过 beta2中有修改,见下面)router.redirect
(现在可以在routes
中直接声明, 参见 Example )router.alias
(现在可以在routes
配置中直接声明, 参见 Example )
Beta 2 中, beforeEach
和 afterEach
又被改回成为 router
的实例方法。这可以让插件和模块更加方便的在 router
实例创建后增加hooks。
导航的钩子函数
钩子系统被极大简化,所有0.7的迁移钩子都作废了,下面是替代方案:
使用组件自身的生命周期钩子函数来替代
activate
和deactivate
在
$router
上使用watcher
来响应路由改变 (e.g. 比如基于新的路由参数获取数据 - Example )canActivate
可以被router 的配置中的beforeEnter
中实现 ExamplecanDeactivate
已经被beforeRouteLeave
取代, 后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。 ExamplecanReuse
已经被移除,因其容易混淆且很少被用到。
此外,在2.0版本中所有的钩子函数都有相同简洁的签名:
guard (toRoute, redirect, next) {
// call redirect to redirect to another route
// call next to confirm current route
// or do nothing to cancel the navigation
}
这些函数也不再支持返回 Promises.
链接(Links)
v-link
指令已经被 <router-link>
组件替代. 这个组件接受以下属性参数:
to
: 一个路径字符串, 或者一个对象 location descriptor .tag
: 渲染成的 html 元素类型,默认是<a>
.exact
: 用于控制当前激活项的行为.append
: 控制相对链接路径的追加方式replace
: 替代而不是作为历史条目压榨active-class
: 当链接项激活时增加的 CSS 样式
这里有个 复杂的例子 展示了 <router-link>
的用法。
命名视图 (Named Views)
单个路由现在可以映射到多个命名组件。这些组件将会在渲染在对应命名的多个 <router-view>
中. Example
滚动行为(Scroll Behavior)
scrollBehavior
选项接受一个函数,返回在路由导航时页面如何滚动的规则。你可以代码控制是否要滚动的页面顶部、书签或者在状态中保存的位置。 Example
Beta2 版本中又对 scrollBehavior
做了修改:
beta.1 中返回 { hash: true }
来滚动到一个锚点,现在返回的是 { selector: route.hash }
。这也同时意味着你可以返回任意的 CSS 选择器,来匹配成要滚动到的目标。
此外,你还可以返回 { selector: '...', x: 0, y: 0 }
,这让路由器首先尝试滚动到匹配的元素,如果没有找到匹配元素,那就滚动到 x
和 y
指定的位置。
最新文章
- 【python】实用函数啥的
- PHP基础20:创建文件
- MyEclipse------缓冲流的使用
- Spring的javaMail邮件发送(带附件)
- VS常用技巧
- Word2010编号列表&;多级列表
- HDU 5750 Dertouzos
- jQuery分析(1) - 介绍
- 在Java中怎样逐行地写文件?
- 认识Backbone (一)
- 基于php(Thinkphp)+jquery 实现ajax多选,反选,不选 删除数据 新手学习向
- 关于String的对象创建
- c++中sort()函数的用法
- 架构学习之高性能NoSQL
- python函数基础用法
- 【Android开源库】美团等APP城市选择
- linux中与Oracle有关的内核参数详解
- SQL Server存储过程用法介绍
- XML 和 JSON 的使用场景
- Jmeter中各种参数化设置的方法
热门文章
- 2014ACM/ICPC亚洲区广州站题解
- OpenCV编程入门目录
- [ Python ] set集合及函数的使用
- oracle11g如何创建数据库
- Grid++Report 注册
- STL模板整理 全排列
- 嵌套循环连接(Nested Loops Joins)
- NBUT 1223 Friends number
- javascript中的this总结
- java.lang.ClassCastException: xut.bookshop.entity.User_$$_javassist_3 cannot be cast to javassist.util.proxy.Proxy