javascript - vue-router 中的 “#” 或 "#!"

Question

不懂vue路由裡「#」 或"#!"分別什麼意思
我自己demo裡的路由有「#」 http://localhost:8080/#/home/article
看到網路上的vue路由有「#!」https://mrjeff578575.github.io/Vue-demo/#!/home/article

############################################

Answer 1

傳送門 https://router.vuejs.org/zh-c...

現在前端路由有3種模式

1. hash: 使用 URL hash 值來作路由。支援所有瀏覽器，包括不支援 HTML5 History Api 的瀏覽器。

2. history: 依賴 HTML5 History API 和伺服器設定。查看 HTML5 History 模式.

3. abstract: 支援所有 JavaScript 運行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

常用的是 1(地址有 # 號) 和 2 (地址和真實請求沒區別)

---

另外,

# 是 vue-router 使用的hash符號

#!是 angularjs Route 使用的hash符號

這個無所謂, 有 # 就行（瀏覽器不會發生頁面跳轉）

---

你給那個頁面使用的是 vue-router v0.7.13, 我看源碼裡也是 #! 這個符號

Answer 2

Vue路由模式

這個稱為路由的hash策略. 與之對應的是path策略. '#'稱為hash符號.hash後方的路徑不會被服務端解析. 具體的 自行搜尋.

Answer 3

#!是hashbang，與#意義完全一樣。不同的僅僅是語義。

Answer 4

#是hash模式
history模式不帶#號，
但部署到伺服器的話
hash模式不會出現刷新404問題。 。
history模式如果刷新或直接連線進入某個頁面，會提示404。 。 。
傳統方式，後端程式會實際產生一個文件，連線請求能真的找到一個文件。 。
這種單頁式只有一個html，也不是後端程式不會自動產生檔案。 。
所以如果使用history模式，部署到伺服器的時候需要設定虛擬路徑
如果請求不到資源的情況下都指向index.html檔案