Vue面试题总结（二）之 vue-router

vue-router是什么

Vue Router 是 Vue.js 官方的路由管理器，创建单页应用程序：通过Vue.js，我们已经在使用组件组成应用程序。将Vue Router添加到混合中时，我们要做的就是将组件映射到路由，并让Vue Router知道在哪里渲染它们

vue-router 的功能

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

复用组件时，怎么对路由参数的变化作出响应

可以使用watch (监测变化) $route 对象
或者使用beforeRouteUpdate 导航守卫

beforeEach三个参数to 、from 、next 的作用

1，to: Route，代表要进入的目标，它是一个路由对象；
2，from: Route，代表当前正要离开的路由，同样也是一个路由对象；
3，next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

对路由重定向（redirect）和别名（alias）的理解

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

vue-router有哪几种导航钩子（ 导航守卫 ）

1、全局守卫： router.beforeEach
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

完整的 vue-router 导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach守卫。
4. 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。
5. 在路由配置里调用beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用beforeRouteEnter。
8. 调用全局的 beforeResole 守卫 (2.5+)。
9. 导航被确认
10. 调用全局的afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用beforeRouteEnter 守卫中传给 next的回调函数。

hash 模式和History 模式的理解

hash 模式：在用超链接制作锚点跳转的时候，就会发现，url后面跟了"#id"（略。。。啊格雷），hash值就是url中从"#"号开始到结束的部分。当 URL 改变时，页面不会重新加载。
History 模式 ：history就是我们平时看到的正常的连接形式。利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。pushState 设置的新 URL 可以是与当前 URL 同源的任意 URL。
注意一点：history 模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致 404 错误。

设置路由的过渡效果(过渡动效)

<router-view>是基本的动态组件,可以用<transition> 组件给它添加一些过渡效果，可以在各路由组件内使用<transition>并设置不同的 name,让每个路由组件有各自的过渡效果。

路由懒加载优化代码

一般情况下，会使用懒加载去优化性能，当路由被访问的时候才加载对应组件，可以使用动态 import 语法来定义代码分块点。