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 指令已经被 <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 改变的内容的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  3. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  4. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  5. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  6. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  7. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  8. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  9. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

随机推荐

  1. Oracle例外定义

    例外名 ORA-XXXXX SQLCODE ACCESS_INTO_NULL ORA-06530 -6530 CASE_NOT_FOUND ORA-06592 -6592 COLLECTION_IS_ ...

  2. C# 网络编程小计 20150202

    在学习网络Socket编程之前必须得学会多线程编程,这个是经常会用的到 可参考:http://www.cnblogs.com/GIS_zhou/articles/1839248.html System ...

  3. jquery - 实例1

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text2.aspx.cs& ...

  4. https配置注意细节

    直接将阿里云https的ca配置配置好之后如果不通的话很有可能是防火墙原因造成的,还有就是nginx要用1.10以上版本的

  5. git学习笔记三

    1.每个分支的历史版本维护信息位置是.git/logs/refs/heads/master,这个位置的信息是文本文件,不是引用. harvey@harvey-Virtual-Machine:~/dem ...

  6. mysql 安装和配置

    mysql 安装: 在命令行输入 sudo apt-get install mysql-server  安装过程中会跳出来一个窗口,输入数据库root用户的密码(必须输入密码) 安装完成后 通过 my ...

  7. MapReduce框架组成

    原文地址:MapReduce的架构组成 MapReduce基本架构 分而治之,并行计算 一句话 -- 整体主从架构,map加reduce:map.split入磁盘,数据对分partition:shuf ...

  8. experss 做小型服务器出现跨域问题

    情况是这样的 我用express做一个小型的服务器来做我demo项目的一个接口 然后我就出现了跨域问题 然后我就 app.all('/*', function(req, res, next) { // ...

  9. 【转载】开发者眼中的Spring与Java EE

    转载自:http://www.infoq.com/cn/news/2015/07/spring-javaee 在Java社区中,Spring与Java EE之争是个永恒的话题.在这场争论中,来自两个阵 ...

  10. 使用jsonp形式跨域访问实现电商平台的左侧导航栏

    电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...