Vue的hash/history模式

hash路由模式

• URL 中的 hash 值只是客户端的一种状态，向服务端发送请求的时候，hash 部分不会被发送；
• hash 值得改变会在浏览器的历史记增加访问记录，所以可以通过浏览器的回退、前进控制 hash 值的改变；
• 可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值；
• 可以通过hashchang 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）；

 

history路由模式

HTML5提供了 history API 来实现 URL 的变化，其中最主要的 API 有以下两个：history.pushState() 和 history.replaceState()。这两个API 可以在不刷新的情况下操作浏览器的历史记录，不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

• 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化；
• 可以通过 popstate 事件来监听 URL 的变化，从而对页面进行跳转（渲染）；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，需要手动触发页面跳转；
• 需要后台配置支持；