前言

vue-router是什么：是vue.js官方的路由管理器和vue.js的核心深度的集成，让开发者更加简单的构建单页面应用。

vue-router的功能是什么：嵌套的路由/视图表

                                          模块化的、基于组件的路由配置

                                          路由参数、查询、通配符

                                          基于vue.js过渡系统的视图过渡效果

                                          细粒度的导航控制（控制的很精细的意思，对很多细节也进行控制）

                                          带有自动激活的 css class 链接

                                           HTML5历史模式或hash模式，在IE中自动降级

                                           自定义滚动条行为

基础

vue-router构建单页面应用，只需要将组件映射到路由，热后告诉vue-router在哪里渲染它们

简单的例子：

最基础的例子

使用vue-router有几个方法

直接利用import引入router.js文件，在文件中写组件的路由

组件中写的路由

利用编程式的导航

编程式的导航写法

动态路由的匹配

有时候我们需要把某种模式匹配到的所有路由，全都映射到同个组件时，我们就会用到动态路由的匹配，路径参数使用：标记当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

动态路由的html

动态路由的js

响应路由参数的变化

当使用路由参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效，生命钩子不被再次调用。复用组件时，想对路由参数的变化作出响应的话，可以用以下两种方式

响应路由参数的变化的两种方法

因为mounted ,created不会再调用 ， 可以这两种方式监听参数变化，做相应的业务逻辑处理。

匹配优先级

匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置

嵌套路由的写法

注意：以/开头的嵌套路径会当作根路径，充分使用嵌套组件而无须设置嵌套路径，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

编程式导航

this.$router.push(location,onComplete?,onAbort?)

除了使用  创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编程式导航来实现： this.$router.push({path:' '}} 。

这方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的地址

各种$router.push{{path:' '}}写法

使用了path，params会被忽略，同样的规则也适用于 router-link 组件的 to 属性。

this.$router.replace (location,onComplete?,onAbort?)

和router.push很像唯一的不同是，它不会向history添加新纪录，而是替换当前的history记录

声明式：<router-link :to="..."  replace>

编程式：router.replace(...)

router go(n)

n为整数，意思是在history记录中向前或后退多少步，类似window.history.go(n)

router.go()用法

命名路由

有时，在通过名称来进行页面路由跳转会方便很多，可以在创建实例的时候给路由设置名称

设置名称name写法

使用方法：

html使用name写法

js使用name写法

命名视图

有时候想要同时(同级)展示多个视图，而不是嵌套展示，这时候就可以使用命名视图的方法，命名视图首先需要在路由配置上命名组件是名字，使用<router-view name=" "></router-view>来实现。

命名组件的name

使用命名视图的方法

嵌套命名路由

命名嵌套路由的name

使用命名嵌套路由

重定向和别名

重定向（redirect）

使用redirect重定向目标

目标重定向为命名路由

目标重定向为方法

别名（alias）

/a 的别名是 /b，则当用户访问 /b 时，URL 会保持为 /b，但是路由匹配为 /a，就像用户访问 /a 一样。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，不会受限于配置的嵌套路由结构。

 别名的写法

路由组件传参

使用$router会使其于路由高度耦合，从而使组件只能在特定的 URL 上使用

可以使用props对其组件和路由进行解耦

使用props解耦的写法

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式

props 是一个对象，它会被按原样设置为组件属性，当 props 是静态的时候有用。

函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等。尽可能保持 props 函数为无状态，因为它只会在路由发生变化时起作用。

HTML5 History 模式

vue-router 默认使用 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。使用history模式时url会好看些（如：http:// dayou.com/user/id），完成 URL 跳转而无须重新加载页面。这种模式需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。服务端需要增加一个覆盖所有情况的候选资源，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。

进阶

导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，参数或查询的改变并不会触发进入/离开的导航守卫。可以观察$router对象来应对这些变化用 beforeRouteUpdate 的组件内守卫，进入路由前先通过守卫，来判断是否可以通过，进而到达页面。

全局守卫

使用 router.beforeEach 注册一个全局前置守卫，在定义router的地方定义

全局守卫的写法

一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve（解决） 完之前一直处于等待的状态。

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。                                                                                           

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home'之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。 

确保要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫（ router.beforeResolve ）

和全局守卫区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

全局后置钩子不接受next函数也不会改变导航本身

全局后置钩子写法

路由独享守卫

在路由配置上直接定义 beforeEnter 守卫

路由独享守卫写法

组件内的守卫

路由组件内直接定义路由导航守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

组件内守卫写法和要注意的部分

beforeRouteEnter( )不能获取组件实例this，不过可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

组件实例作为回调方法的写法

beforeRouteEnter 是支持next传递回调的唯一守卫。

对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调

离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消

离开守卫next(false)写法

完整的导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

定义路由的时可配置 meta 字段：

路由配置meta字段

我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，可能匹配多个路由记录

那么如何访问这个 meta 字段呢

访问 meta 字段

要确保最后使用了next( )

过渡效果

 是基本的动态组件，我们可以用组件给它添加过渡效果

添加过渡效果

单个路由的过渡效果

如果只想让部分路由有过渡效果或者想路由的效果不同可在各路由组件内使用<transition>并且设置不同的name值

设置不同的name值

基于路由的动态过渡效果

基于当前路由与目标路由的变化关系，动态设置过渡效果

动态的绑定name

父组件判定路由动态过渡效

数据获取

我们经常需要在页面加载的时候获取对应的数据，我们可以通过以下的两种方式进行：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

导航完成之后获取

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

导航完成之前获取

这种方式我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

滚动行为

当切换到新路由时，想要页面滚到顶部，或是保持原先的滚动位置，就像重新加载页面那样。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

滚动到锚点处或者头部 

异步滚动

如果在不知道要滚动到那个具体位置，则可以使用异步滚动，获取后台要滚动到的具体位置，返回一个 Promise 来得出预期的位置描述：

异步滚动使用实例

将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的

路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。

所以我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Foo.vue') // 返回 Promise

定义一个能够被 Webpack 自动代码分割的异步组件

const Foo = () => import('./Foo.vue')

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。