vue.router的作用是什么

這篇文章主要介紹vue.router的作用是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.router是官方的路由插件，可讓構建單頁面應用變得易如反掌。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來；在vue-router單頁面應用中，可用路徑之間的切換來實現頁面切換和跳轉的。

vue.router的作用是：

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在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是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表

• 模塊化的、基于組件的路由配置

• 路由參數、查詢、通配符

• 基于 Vue.js 過渡系統的視圖過渡效果

• 細粒度的導航控制

• 帶有自動激活的 CSS class 的鏈接

• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級

• 自定義的滾動條行為

vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系。

以上是“vue.router的作用是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！