vue-router是什麼

要學習vue-router就要先知道這裡的路由是什麼？為什麼我們不能像原來一樣直接用標籤寫連結哪？ vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題

vue-router是什麼

這裡的路由並不是指我們平常所說的硬體路由器，這裡的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的連結路徑管理系統。
vue-router是Vue.js官方的路由插件，它和vue.js是深度整合的，適合用於建立單一頁面應用程式。 vue的單一頁面應用程式是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對應起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單一頁面應用程式中，則是路徑之間的切換，也就是元件的切換。路由模組的本質 就是建立起url和頁面之間的映射關係。
至於我們為啥不能用a標籤，這是因為用Vue做的都是單頁應用，就等於只有一個主的index.html頁面，所以你寫的標籤是不起作用的，你必須使用vue-router來管理。

vue-router實作原則

SPA(single page application):單一頁面應用程序，只有一個完整的頁面；它在載入頁面時，不會載入整個頁面，而是只更新某個指定的容器中內容。單一頁面應用程式(SPA)的核心之一是: 更新檢視而不重新要求頁面;vue-router在實作單一頁面前端路由時，提供了兩種方式：Hash模式和History模式；

##1 、Hash模式：

vue-router 預設hash 模式－ 使用URL 的hash 來模擬一個完整的URL，於是當URL 改變時，頁面不會重新載入。 hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新加載網頁，也就是說#是用來指導瀏覽器動作的，對伺服器端完全無用，HTTP請求中也不會不包括#；同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”後退”按鈕，就可以回到上一個位置；所以說Hash模式透過錨點值的改變，根據不同的值，渲染指定DOM位置的不同資料

2、History模式：

由於hash模式會在url中自帶#，如果不想要很醜的hash，我們可以用路由的history 模式，只需要在配置路由規則時，加入"mode: 'history'",這種模式充分利用history.pushState API 來完成URL 跳轉而無須重新載入頁面。

以上是vue-router是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！