【概念讲述】
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
年轻是我们唯一拥有权利去编织梦想的时光