【node.js web项目】解决路由默认是hash模式(带#)

【概念讲述】

1.什么是hash模式

Vue+WebPack项目，本身是一个单页应用。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。虽然使用 vue-router 用于设置页面跳转时的路径，但实际是控制页面上的组件切换。

详细讲解什么是 url hash 可以查看 《阮一峰博客中-url的井号》：

http://www.ruanyifeng.com/blog/2011/03/url_hash.html

【解决问题】

在项目结合express后，使用app中间件对路由进行匹配，发现当url带有#，如 http://localhost:8080/#/test/123

以下是我自己设置的app中间件

通过断点方式debug，发现不会对此请求进行匹配。

解决方式：

在创建VueRouter实例中，设置 mode 为 history 模式，利用 history.pushState API 即使 url 像正常的 url （ http://localhost:8080/test/123）

-------------------------------------------------------------------------------------

vue-router说明文档有详细讲解如何清除hash模式

https://router.vuejs.org/zh-cn/essentials/history-mode.html