vue-router的實現(xiàn)原理

小編給大家分享一下vue-router的實現(xiàn)原理，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用<a></a>標(biāo)簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問題，就是本篇要探討的主要問題

vue-router是什么

這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應(yīng)用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質(zhì) 就是建立起url和頁面之間的映射關(guān)系。
至于我們?yōu)樯恫荒苡胊標(biāo)簽，這是因為用Vue做的都是單頁應(yīng)用，就相當(dāng)于只有一個主的index.html頁面，所以你寫的<a></a>標(biāo)簽是不起作用的，你必須使用vue-router來進(jìn)行管理。

vue-router實現(xiàn)原理

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

1、Hash模式：

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。 hash（#）是URL 的錨點，代表的是網(wǎng)頁中的一個位置，單單改變#后的部分，瀏覽器只會滾動到相應(yīng)位置，不會重新加載網(wǎng)頁，也就是說 #是用來指導(dǎo)瀏覽器動作的，對服務(wù)器端完全無用，HTTP請求中也不會不包括#；同時每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置；所以說Hash模式通過錨點值的改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)

2、History模式：

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

以上是“vue-router的實現(xiàn)原理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！