Vue Router 支持兩種路由模式:Hash 模式和 History 模式。
1.哈希模式
Hash 模式是通過改變 URL 中的 hash(#)來實現路由的。例如:
http://example.com/#/about
在這個 URL 中,# 后面的 /about 就是路由的路徑。當我們點擊頁面中的鏈接或調用 router.push() 方法時,Vue Router 會將新的路由添加到 URL 中的 hash 后面,瀏覽器會自動滾動到頁面中相應的位置,并觸發相應的組件渲染。
Hash 模式的實現原理很簡單:Vue Router 監聽瀏覽器的 hashchange 事件,然后根據當前的 hash 值匹配路由表中的相應路由,并觸發相應的組件渲染。
2.歷史模式
History 模式是通過 HTML5 中的 history API 來實現路由的。例如:
在這個 URL 中,/about 就是路由的路徑。當我們點擊頁面中的鏈接或調用 router.push() 方法時,Vue Router 會使用 history.pushState() 方法將新的路由添加到瀏覽器的歷史記錄中,并觸發相應的組件渲染。
History 模式的實現原理也很簡單:Vue Router 使用 history.pushState() 方法將新的路由添加到瀏覽器的歷史記錄中,然后通過監聽 popstate 事件來響應瀏覽器的前進和后退按鈕。當用戶點擊前進或后退按鈕時,Vue Router 根據當前的 URL 匹配路由表中的相應路由,并觸發相應的組件渲染。
需要注意的是,使用 History 模式時,需要在服務器端進行相應的配置,以確保在用戶直接訪問路由時可以正確地返回對應的頁面。