【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

年轻是我们唯一拥有权利去编织梦想的时光

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

相关文章:

你感兴趣的文章:

标签云: