【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