【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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM