【概念講述】
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