Vue2 路由
来源:互联网 发布:淘宝网拉杆箱价格图片 编辑:程序博客网 时间:2024/06/06 00:09
vue-router 2.0 改变的内容
原文 https://segmentfault.com/a/1190000006623100
主题 软件开发
2.x 版本的 vue-router 相比之前的0.7.x版本,有很多破坏性改变:
通用 API 的修改
The old router.go() is now router.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 中实现 Example
canDeactivate 已经被 beforeRouteLeave 取代, 后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。 Example
canReuse 已经被移除,因其容易混淆且很少被用到。
此外,在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 指令已经被 组件替代. 这个组件接受以下属性参数:
to : 一个路径字符串, 或者一个对象 location descriptor .
tag : 渲染成的 html 元素类型,默认是 .
exact : 用于控制当前激活项的行为.
append : 控制相对链接路径的追加方式
replace : 替代而不是作为历史条目压榨
active-class : 当链接项激活时增加的 CSS 样式
这里有个 复杂的例子 展示了 的用法。
命名视图 (Named Views)
单个路由现在可以映射到多个命名组件。这些组件将会在渲染在对应命名的多个 中. Example
滚动行为(Scroll Behavior)
scrollBehavior 选项接受一个函数,返回在路由导航时页面如何滚动的规则。你可以代码控制是否要滚动的页面顶部、书签或者在状态中保存的位置。 Example
Beta2 版本中又对 scrollBehavior 做了修改:
beta.1 中返回 { hash: true } 来滚动到一个锚点,现在返回的是 { selector: route.hash } 。这也同时意味着你可以返回任意的 CSS 选择器,来匹配成要滚动到的目标。
此外,你还可以返回 { selector: ‘…’, x: 0, y: 0 } ,这让路由器首先尝试滚动到匹配的元素,如果没有找到匹配元素,那就滚动到 x 和 y 指定的位置
- Vue2 路由
- Vue2路由问题汇总
- vue2.0 路由 学习笔记
- vue2.0——路由
- Vue2路由动画效果实现
- vue2.0路由--vue-router
- vue2.0路由的配置
- Vue2路由动画效果实现
- vue2路由移除#号(Apache)
- vue2.0 动态路由传参方法
- Vue2.X的路由和钩子函数
- vue2.0 路由不显示router-view
- vue2.x的路由1-基本配置
- vue2.x的路由2-进阶
- vue2.0路由及兄弟组件通信
- Vue2.0路由动态路径的绑定
- vue2路由移除#号(Apache)
- 【Vue】2.vue2.0路由及路由嵌套
- 历届试题 最大子阵
- Beacon of BLE
- Black Hat Python 之 网络编程的Helloworld级别程序
- 分布式文件系统:HDFS基础与应用
- SVN Clearnup fail 解决问题
- Vue2 路由
- 高通平台开机logo的修改
- 常见的域名解析类型和使用方法
- Java解惑
- [转][JS]Math.random()随机数的二三事
- SqlServer截取日期年、月、日、时、分、秒
- 途牛最新财报再亏5.6亿,步子太大总会扯到蛋
- 设置多个div并排显示
- springMVC 返回类型选择