小问题记录
1 使用 v-for 遍历 object
v-for 遍历对象的时候，第一个参数是 value ，而不是 {key: value}
1 vue-router 的两种模式：hash 和 history
1.1 vue-router 是什么
是 vue.js 官方的路由管理器，功能如下：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为 核心在于：改变的路由的同时，不会向后端发送请求
1.2 hash 和 history 的特点及区别
1.2.1 特点
- hash：
使用 URL 的 hash 来模拟一个完成的 url。
比如这个 URL：www.abc.com/#/hello ，hash 的值为 #/hello。
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。# 是用来指导浏览器动作的，对服务器端完全无用，单单改变 # 之后的内容，浏览器只会滚动带对应的位置而不会重新加载网页。 - history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。 （需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。
1.2.2 区别
使用 history.pushState() 相比 hash 有以下好处：
- 新设置的 URL 可以是同源下的任意 URL，而 hash 只能修改 # 之后的部分
- 可以设置与之前一模一样的 URL，会触发添加记录到栈中，而 hash 不会触发此行为
- 可以通过
objectState参数添加任意类型的数据到栈中，而 hash 只可添加短字符串 - 可额外设置 title 供后续使用
而 hash 的好处在于：
- 由于只有 hash 之前的内容才会被包含在请求中，因此，对后端来说即使没有做到路由全覆盖，也不会出现 404 的问题，而 history 则需要后端配置。
可参考 vue-router 官方解释：router.vuejs.org/zh/guide/es…
1.2.3 导航守卫
- 全局前置守卫：
router.beforeEach() - 全局解析守卫：
router.resolve() - 全局后置钩子：
router.afterEach() - 组件内的守卫：
- beforeRouteEnter()：在渲染该组件对应路由被 comfirm 嗲用，不能获取组件 this 实例（组件实例还未创建）
- beforeRouteUpdate()：当前路由改变前，但该组件被复用时调用，可访问 this
- beforeRouteLeave()：导航离开该组件的对应路由时调用，可访问 this
完整的导航解析流程：
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
