Vue Router 相关
history API
了解浏览器 history API 吗
详细信息
window.history.back()后退window.history.forward()前进window.history.go(x)前进或者后退 x 步
HTML5 history 新增了 2 个 API，可以在不进行刷新的情况下，操作浏览器的历史纪录
window.history.pushState()新增一个历史记录window.history.repalceState()直接替换当前的历史记录
hash 和 history 模式的实现原理
详细信息
- # 后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面；
通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。 - history 模式的实现，主要是 HTML5 标准发布的两个
API，pushState和replaceState这两个 API 可以在改变 URL，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。
hash 和 history 模式的区别
详细信息
- 首先是在 URL 的展示上，hash 模式有
#；history 模式没有 - 刷新页面时，hash 模式可以正常加载到 hash 值对应的页面；而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
- 在兼容性上，hash 可以支持低版本浏览器和 IE
vue-router
说下 $route 和 $router 的区别
详细信息
$route 是
路由信息对象，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数$router 是
路由实例对象，是全局路由的实例，是 router 构造方法的实例。包括了 push、go、replace 等方法
Vue-Router 导航守卫
有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。
路由钩子
全局路由钩子：
- router.beforeEach 全局前置守卫 进入路由之前
- router.afterEach 全局后置钩子 进入路由之后
- router.beforeResolve 全局解析守卫（2.5.0+）在 beforeRouteEnter 它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。
单个路由独享钩子：
- beforeEnter 不想全局配置守卫的话，可以为某些路由单独配置守卫，有三个参数 ∶ to、from、next
组件内钩子：
- beforeRouteEnter 进入组件前触发
- beforeRouteUpdate 当前地址改变并且改组件被复用时触发。
举例来说，带有动态参数的路径 foo/∶id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 foa 组件，这个钩子在这种情况下就会被调用
- beforeRouteLeave 离开组件被调用
这三个钩子都有三个参数 ∶to、from、next
vue-router 如何实现路由守卫
路由保护在应用开发过程中非常重要，几乎每个应用都要做各种路由权限管理。所以回答和代码部分都有：
// todo: 代码编写
详细信息
- vue-router 中保护路由的方法叫做路由守卫，主要用来通过跳转或取消的方式守卫导航。
- 路由守卫有三个级别：全局、路由独享、组件级。影响范围由大到小，例如全局的
router.beforeEach()，可以注册一个全局前置守卫，每次路由导航都会经过这个守卫，因此在其内部可以加入控制逻辑决定用户是否可以导航到目标路由；在路由注册的时候可以加入单路由独享的守卫，例如beforeEnter，守卫只在进入路由时触发，因此只会影响这个路由，控制更精确；我们还可以为路由组件添加守卫配置，例如beforeRouteEnter，会在渲染该组件的对应路由被验证前调用，控制的范围更精确了。 - 用户的任何导航行为都会走
navigate方法，内部有个guards队列按顺序执行用户注册的守卫钩子函数，如果没有通过验证逻辑则会取消原有的导航。
vueRouter 的完整的导航解析流程是什么
完整的路由导航解析流程（不包括其他生命周期）
- 触发进入路由
- 调用要离开路由的组件守卫
beforeRouteLeave - 调用全局前置守卫
beforeEach - 在重用的组件里调用
beforeRouteUpdate - 在路由配置里调用
beforeEnter。 - 解析异步路由组件
- 在将要进入的路由组件中调用
beforeRouteEnter - 调用全局解析守卫
beforeResolve - 导航被确认
- 调用全局的
afterEach钩子 触发 DOM 更新mounted- 用创建好的实例调用 beforeRouteEnter 守卫中传给
next的回调函数
触发钩子的完整顺序
路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从 a 组件离开，第一次进入 b 组件 ∶
beforeRouteLeave路由组件的组件离开路由前钩子，可取消路由离开。beforeEach路由全局前置守卫，可用于登录验证、全局路由 loading 等。beforeEnter路由独享守卫beforeRouteEnter路由组件的组件进入路由前钩子。beforeResolve路由全局解析守卫afterEach路由全局后置钩子beforeCreate组件生命周期，不能访问 this。created组件生命周期，可以访问 this，不能访问 dom。beforeMount组件生命周期deactivated离开缓存组件 a，或者触发 a 的 beforeDestroy 和 destroyed 组件销毁钩子。mounted访问或操作 dom。activated进入缓存组件，进入 a 的嵌套子组件（如果有的话）。- 执行
beforeRouteEnter回调函数 next。