vue.router的作用是官方的路由插件,它和【vue.js】是深度集成的,適合用于構建單頁面應用,讓構建單頁面應用變得易如反掌。
【相關文章推薦:vue.js】
-
該方法適用于所有品牌電腦
vue.router的作用是:
vue-router實現(xiàn)原理
SPA(single page application):單一頁面應用程序,只有一個完整的頁面;它在加載頁面時,不會加載整個頁面,而是只更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是: 更新視圖而不重新請求頁面;vue-router在實現(xiàn)單頁面前端路由時,提供了兩種方式:Hash模式和History模式;
1、Hash模式:
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL,于是當 URL 改變時,頁面不會重新加載。 hash(#)是URL 的錨點,代表的是網(wǎng)頁中的一個位置,單單改變#后的部分,瀏覽器只會滾動到相應位置,不會重新加載網(wǎng)頁,也就是說 #是用來指導瀏覽器動作的,對服務器端完全無用,HTTP請求中也不會不包括#;同時每一次改變#后的部分,都會在瀏覽器的訪問歷史中增加一個記錄,使用”后退”按鈕,就可以回到上一個位置;所以說Hash模式通過錨點值的改變,根據(jù)不同的值,渲染指定DOM位置的不同數(shù)據(jù)
2、History模式:
由于hash模式會在url中自帶#,如果不想要很丑的 hash,我們可以用路由的 history 模式,只需要在配置路由規(guī)則時,加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
vue-router
是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,讓構建單頁面應用變得易如反掌。包含的功能有:
-
嵌套的路由/視圖表
-
模塊化的、基于組件的路由配置
-
路由參數(shù)、查詢、通配符
-
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
-
細粒度的導航控制
-
帶有自動激活的 CSS class 的鏈接
-
HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
-
自定義的滾動條行為
vue的單頁面應用是基于路由和組件的,路由用于設定訪問路徑,并將路徑和組件映射起來。傳統(tǒng)的頁面應用,是用一些超鏈接來實現(xiàn)頁面切換和跳轉的。在vue-router單頁面應用中,則是路徑之間的切換,也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系。
相關學習推薦:javascript學習教程