首頁 web前端 Vue.js vue中hash與history的區別

vue中hash與history的區別

May 02, 2024 pm 09:06 PM
vue

Vue 路由中 hash 和 history 模式的差異在於:URL 格式:hash 使用 # 前綴,history 使用常規路徑。瀏覽器處理:hash 僅由瀏覽器處理,不會傳送到伺服器;history 使用歷史記錄 API,會傳送請求導致頁面重新載入。優缺點:hash 瀏覽器相容性好、不需要伺服器端配置,但 URL 不美觀;history URL 美觀、可使用後端路由和伺服器端渲染,但需要伺服器端配置。

vue中hash與history的區別

Vue 中hash 和history 的差異

在Vue 中,路由提供了兩種模式:hash 和history。它們的主要差異在於 URL 的格式和瀏覽器處理方式。

URL 格式

  • hash 模式: 使用# 前綴的雜湊片段,例如 #/home
  • #history 模式: 使用常規的路徑,例如/home

瀏覽器處理

  • hash 模式: 雜湊片段不會傳送到伺服器,僅由瀏覽器處理。因此,頁面不會重新加載,URL 中也不會顯示完整的路徑。
  • history 模式: 使用瀏覽器的歷史記錄 API,當 URL 變更時會傳送請求到伺服器,導致頁面重新載入。

優缺點

hash 模式

  • ##優點:

      不需要伺服器端設定
    • 瀏覽器相容性更好
  • #缺點:

      URL 中的雜湊片段不美觀
    • 無法使用後端路由
    • 不能與伺服器端渲染配合使用
##history 模式

    優點:
  • URL 美觀
    • 可以使用後端路由
    • ##可以與伺服器端渲染配合使用
    缺點:
  • 需要伺服器端設定

      在某些舊瀏覽器中可能不支援
  • 選擇建議

選擇適當的路由模式取決於具體情況:

如果不需要後端路由或伺服器端渲染,並且需要更好的瀏覽器相容性,

hash 模式
    是一個不錯的選擇。
  • 如果需要後端路由、伺服器端渲染或美觀的 URL,history 模式
  • 則是更適合的選項。

以上是vue中hash與history的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中echarts怎麼用 vue中echarts怎麼用 May 09, 2024 pm 04:24 PM

vue中echarts怎麼用

vue中的export default的作用 vue中的export default的作用 May 09, 2024 pm 06:48 PM

vue中的export default的作用

vue中map函數的用法 vue中map函數的用法 May 09, 2024 pm 06:54 PM

vue中map函數的用法

vue中event和$event區別 vue中event和$event區別 May 08, 2024 pm 04:42 PM

vue中event和$event區別

vue中onmounted作用 vue中onmounted作用 May 09, 2024 pm 02:51 PM

vue中onmounted作用

vue中export與export default區別 vue中export與export default區別 May 08, 2024 pm 05:27 PM

vue中export與export default區別

vue中的onmounted對應react哪個生命週期 vue中的onmounted對應react哪個生命週期 May 09, 2024 pm 01:42 PM

vue中的onmounted對應react哪個生命週期

vue中的鉤子是什麼 vue中的鉤子是什麼 May 09, 2024 pm 06:33 PM

vue中的鉤子是什麼

See all articles