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 指定的位置。
vue-router 2.0 改变的内容的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
随机推荐
- JavaScript中数组对象详解
Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var li ...
- HTML+CSS+JS(+Vue)写一个通讯录组件
求各位大大的Star(*/ω\*). 没有录屏,所以上传的是图片.后面已补充录屏效果. 效果:(主要是参考小米Note3的通讯录的效果做的) 主要功能: 1. 滚动后,通讯录的模块标题会固定在顶部(图 ...
- vue 文件引入
直接 <script> 引入 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量.重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告. 开发环 ...
- vue页面高度填充,不出现滚动条
现在的需求是这样:vue单页工程化开发,上面有一个header,左边有一个侧边栏,右边内容展示.要求左边侧边栏的高度,要填充满整个页面(除了header外,header:height:60px)--如 ...
- node采用的commonJs规范
AMD与commonJS规范不同 同步加载 主要就是一个输出,一个引入,我也建了两个文件,一个输出文件一个引入文件 export.js ; ; ; function incCounter(){ cou ...
- OpenCL学习笔记(一):摩尔定律,异构计算与OpenCL初印象
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 关于摩尔定律: 摩尔定律19 ...
- 【JBPM4】完成任务
示例代码: ProcessEngine processEngine = Configuration.getProcessEngine(); TaskService taskService = proc ...
- IIS 安装问题
今天去客户现场的内网环境安装IIS,结果第一步尴尬,是虚拟机搭出来,安装时没有源文件,然后让那边运维给系统盘挂上了,第一步通过了,可以安装了,但是由于之前也没吝啬,啥都点了,这次就合计不用那么多,结果 ...
- LR脚本用户自定义C语言函数
LR脚本实战:用户自定义C语言函数 Loadrunner可以使用标准C语言的函数,因此我们可以在脚本中编写自己的函数用于调用,把脚本结构化,更好的进行重用. 先看一个例子: Action() { in ...
- gradle打包分编译环境
gradle打包分测试.开发.生产环境 buildTypes { debug { signingConfig signingConfigs.myConfig buildConfigField(&quo ...