前端路由

简单的说，路由是根据不同的 url 地址展示不同的内容或组件
前端路由更多用在单页应用上, 也就是 SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

主要方案

在 html5 的 history api 出现之前,通过 window.location.hash (#)来记录状态信息
hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面
可以为 hash 的改变添加监听事件：

window.addEventListener("hashchange", funcRef, false)
每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录

利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了。
请看 demo1
demo2

有了 history 之后可以操作 session history 实现路由
History 提供了两个新的方法：pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改
demo

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 的回调函数。