Vue Router 路由模式介绍

Question

Hash

浏览器的 hash 值（#hash）变化并不会导致页面刷新，通过 window.onhashchange 可以侦听到 hash 的变化，在处理函数中对视图进行更新即可。

History

使用 history API 进行状态管理，同样不会导致页面进行刷新，只是操作 history 维护的数据。使用的方法有 pushState、repalceState、back、forward、 go 等，其中一些方法的操作会触发 popstate 事件，利用事件来处理视图的更新即可。

该种方式配置的请求到后端会被当做 404，因此需要在服务端进行配置，将符合某种规则的地址都直接导向到我们的 SPA 的入口文件。

特点

pushState 可以在完全相同的 url 中保存多个 state，而 hash 只能在 hash 变化的时候才生成一条
pushState 可以为每个 state 关联复杂的数据，而 hash 值只有一个字符结构可用
pushState 需要后台支持，hash 则可以直接前端使用

参考资料

• https://router.vuejs.org/guide/essentials/history-mode.html
• https://developer.mozilla.org/zh-CN/docs/Web/API/History_API