vue-router原理到最佳实践

本文是vue-router系列。这里从浏览器到vue-router原理到最佳实践都会有详细的讲解。由于篇幅较长，建议可以选择感兴趣的目录看。

先了解了浏览器的history原理，才能更好的结合vue-router源码一步步了解它的实现。如果这块已经有了解可以直接跳过。

pushState/replaceState/popstate 解析
vue-router 实现原理
route 跟 router 的区别
通过路由元信息设置登录
设置滚动行为
vue 路由 按需 keep-alive
watch 监听路由变化
如何检测物理键返回
如何做出翻书效果
如何做一个优雅的路由分区

pushState/replaceState/popstate 解析
HTML5提供了对history栈中内容的操作。通过history.pushState/replaceState实现添加地址到history栈中。
pushState/replaceState() 方法
pushState() 需要三个参数:

状态对象
标题 (目前被忽略)
(可选的) 一个URL.

让我们来解释下这三个参数详细内容：

状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.

标题 — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。

改变历史记录条目:
@clickA
history.pushState({ page: 1 }, “”, “a.html”);

@clickB
history.pushState({ page: 2 }, “”, “b.html”);
复制代码当历史记录条目更改时，将触发popstate事件。
如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。
只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）
触发浏览器回退按钮:
window.addEventListener(‘popstate’, ()=>{
console.log(location.href)
})
复制代码vue-router 实现原理
总体来说就是使用了history的方法来控制浏览器的路由，结合vue实现数据与视图更新。
上面我们已经讲了history的使用原理，接下来结合vue-router具体来看一下
安装 vue-router
install.js
通过 Object.defineProperty 将 _router 挂载在 Vue 原型的 router 来调用 _router。使用get的好处是，保证了安全性，只能读不能修改 r o u t e r 。 / / 项 目 内 可 以 通 过 t h i s . router。 // 项目内可以通过 this.