前端路由实现方式

路由实现方式：history模式和hash模式

hash路由模式

URL组成： URL组成：协议、域名、路径、query、hash等 监听hash的变化，渲染不同的组件代码

https://v2.cn.vuejs.org/v2/guide/installation.html
https://v2.cn.vuejs.org/v2/guide/installation.html#Vue-Devtools 
https://v2.cn.vuejs.org/v2/guide/installation.html#CDN 
https://v2.cn.vuejs.org/v2/guide/installation.html#NPM

一个URL中关于hash的组成部分就是 "#" 号后面的，不同路由对应的hash是不一样的，但是它们都是在访问同一个静态资源installation.html。我们需要做的就是如何能够监听到URL中关于hash部分发生的变化，从而做出对应的改变。


hash模式所有的工作都是在前端完成的，不需要后端服务的配合
hash模式下，URL中会带有 "#" ，看起来不美观
hash模式的实现方式就是通过监听URL中hash部分的变化，从而做出对应的渲染逻辑

history路由模式

实现：

history路由模式的实现，是要归功于HTML5提供的一个history全局对象，可以将它理解为其中包含了关于我们访问网页（历史会话）的一些信息

暴露了一些有用的方法：
1、window.history.go 可以跳转到浏览器会话历史中的指定的某一个记录页
2、window.history.forward 指向浏览器历史中的下一页，跟浏览器的前进按钮相同
3、window.history.back 返回浏览历史中的上一页，跟浏览器的回退按钮功能相同
4、window.history.pushState 可以将给定的数据压入到浏览器会话历史栈中
5、window.history.replaceState 将当前的会话页面的url替换成指定的数据

特点

history路由的实现，主要就是依靠于pushState与replaceState实现

会改变当前页面显示的url，但都不会刷新页面
pushState是压入浏览器的会话历史栈中，会使得history.length加1，而replaceState是替换当前的这条会话历史，因此不会增加history.length

注意

popstate无法监听history.pushState和history.replaceState方法

总结

1. hash的实现实现全部在前端，不需要后端服务器配合，兼容性好，主要是通过监听hashchange事件，处理前端业务逻辑
2. history的实现，需要服务器做以下简单的配置，通过监听pushState及replaceState事件，处理前端业务逻辑