關于 Vue 的部署,一個常見的問題就是如何在部署的時候去掉 URL 中的 # 號。這個問題其實涉及到了瀏覽器的前端路由實現原理。
在傳統的 URL 路由中,是通過 URL 中的問號 ? 和等號 = 來傳遞參數的。比如一個網址 http://www.example.com/index.php?id=1,其中的 id=1 就是通過問號和等號來傳遞的。而在前端路由中,URL 中的 # 號來作為參數的傳遞。比如一個帶有前端路由的網址,如 http://www.example.com/#/page1,其中 # 后面的 /page1 就是前端路由的參數。
但是,這樣使用 # 號傳遞參數會帶來一個問題,就是每次傳遞參數都會導致整個頁面的刷新。這顯然是不利于前端應用的使用的。為了解決這個問題,HTML5 引入了 history.pushState 和 history.replaceState 兩個 API,它們可以在不刷新頁面的情況下改變當前 URL,并且在瀏覽器的歷史記錄中增加相應的記錄。
Vue 中解決去掉 # 號的問題,就是通過使用 history.pushState 和 history.replaceState 方法。具體實現就是在 Vue Router 的配置中使用 mode: 'history' 來開啟 HTML5 history 模式。這樣,當用戶訪問一個 URL 時,瀏覽器會向服務器發送請求,服務器會返回相應的 HTML 頁面。但是,當用戶在前端進行路由跳轉時,瀏覽器就不會向服務器發送請求了,而是會使用 history.pushState 或 history.replaceState 方法改變 URL,并在瀏覽器的歷史記錄中增加記錄。
const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] })
需要注意的是,使用 HTML5 history 模式有一個限制,就是需要服務器端支持。當瀏覽器向服務器發送請求時,服務器需要返回相應的 HTML 頁面。但是,如果訪問的路徑在服務器中不存在,服務器會返回 404 錯誤,導致應用無法正常運行。如果是使用 Node.js 或者 Nginx 等應用服務器,可以配置服務器端的路由規則來支持 HTML5 history 模式。
總的來說,將 Vue 應用中的路由切換到 HTML5 history 模式可以使用戶在前端進行路由跳轉時不再刷新整個頁面,從而增加應用的交互性和用戶體驗。在 Vue Router 的配置中,使用 mode: 'history' 來開啟 HTML5 history 模式就可以實現這一功能。