欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析前端路由簡介以及vue-router實現(xiàn)原理

 更新時間:2018年06月01日 13:47:53   作者:muwoo  
路由就是用來跟后端服務(wù)器進行交互的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。這篇文章主要介紹了前端路由簡介以及vue-router實現(xiàn)原理,需要的朋友可以參考下

路由這個概念最先是后端出現(xiàn)的。在以前用模板引擎開發(fā)頁面時,經(jīng)常會看到這樣

http://www.xxx.com/login

大致流程可以看成這樣:

  1. 瀏覽器發(fā)出請求
  2. 服務(wù)器監(jiān)聽到80端口(或443)有請求過來,并解析url路徑
  3. 根據(jù)服務(wù)器的路由配置,返回相應(yīng)信息(可以是 html 字串,也可以是 json 數(shù)據(jù),圖片等)
  4. 瀏覽器根據(jù)數(shù)據(jù)包的 Content-Type 來決定如何解析數(shù)據(jù)

簡單來說路由就是用來跟后端服務(wù)器進行交互的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。

前端路由

1. hash 模式

隨著 ajax 的流行,異步數(shù)據(jù)請求交互運行在不刷新瀏覽器的情況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應(yīng)用。單頁應(yīng)用不僅僅是在頁面交互是無刷新的,連頁面跳轉(zhuǎn)都是無刷新的,為了實現(xiàn)單頁應(yīng)用,所以就有了前端路由。 類似于服務(wù)端路由,前端路由實現(xiàn)起來其實也很簡單,就是匹配不同的 url 路徑,進行解析,然后動態(tài)的渲染出區(qū)域 html 內(nèi)容。但是這樣存在一個問題,就是 url 每次變化的時候,都會造成頁面的刷新。那解決問題的思路便是在改變 url 的情況下,保證頁面的不刷新。在 2014 年之前,大家是通過 hash 來實現(xiàn)路由,url hash 就是類似于:

http://www.xxx.com/#/login

這種 #。后面 hash 值的變化,并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求,瀏覽器不發(fā)出請求,也就不會刷新頁面。另外每次 hash 值的變化,還會觸發(fā) hashchange 這個事件,通過這個事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽 hashchange 來實現(xiàn)更新頁面部分內(nèi)容的操作:

function matchAndUpdate () {
 // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年后,因為HTML5標(biāo)準(zhǔn)發(fā)布。多了兩個 API, pushState 和 replaceState ,通過這兩個 API 可以改變 url 地址且不會發(fā)送請求。同時還有 popstate 事件。通過這些就能用另一種方式來實現(xiàn)前端路由了,但原理都是跟 hash 實現(xiàn)相同的。用了 HTML5 的實現(xiàn),單頁路由的 url 就不會多出一個#,變得更加美觀。但因為沒有 # 號,所以當(dāng)用戶刷新頁面之類的操作時,瀏覽器還是會給服務(wù)器發(fā)送請求。為了避免出現(xiàn)這種情況,所以這個實現(xiàn)需要服務(wù)器的支持,需要把所有路由都重定向到根頁面。

function matchAndUpdate () {
 // todo 匹配路徑 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

Vue router 實現(xiàn)

我們來看一下 vue-router 是如何定義的:

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
 mode: 'history',
 routes: [...]
})
new Vue({
 router
 ...
})

可以看出來 vue-router 是通過 Vue.use 的方法被注入進 Vue 實例中,在使用的時候我們需要全局用到 vue-router 的 router-view 和 router-link 組件,以及 this.$router/$route 這樣的實例對象。那么是如何實現(xiàn)這些操作的呢?下面我會分幾個章節(jié)詳細(xì)的帶你進入 vue-router 的世界。(閱讀源碼是有點枯燥,但是帶著問題去了解,就感覺很有意思。如果你對 vue-router 的實現(xiàn)機制也存在一些疑問,可以一起探討交流)

vue-router 實現(xiàn) -- install

vue-router 實現(xiàn) -- new VueRouter(options)

vue-router 實現(xiàn) -- HashHistory

未完待續(xù)...

更多 blog

總結(jié)

以上所述是小編給大家介紹的前端路由簡介以及vue-router實現(xiàn)原理,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • electron?vue?模仿qq登錄界面功能實現(xiàn)

    electron?vue?模仿qq登錄界面功能實現(xiàn)

    這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項目,安裝electron,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue3通過canvas實現(xiàn)圖片圈選功能

    vue3通過canvas實現(xiàn)圖片圈選功能

    這篇文章將給大家詳細(xì)介紹了vue3如何通過canvas實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧
    2023-12-12
  • vue中路由重定向redirect問題

    vue中路由重定向redirect問題

    這篇文章主要介紹了vue中路由重定向redirect問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue 系列——vue2-webpack2框架搭建踩坑之路

    vue 系列——vue2-webpack2框架搭建踩坑之路

    本文從零搭建vue項目,給大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以參考下
    2017-12-12
  • Vue3使用element-plus組件不顯示問題

    Vue3使用element-plus組件不顯示問題

    這篇文章主要介紹了Vue3使用element-plus組件不顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue 如何追蹤數(shù)據(jù)變化

    Vue 如何追蹤數(shù)據(jù)變化

    這篇文章主要介紹了Vue 如何追蹤數(shù)據(jù)變化,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實例

    Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實例

    下面小編就為大家?guī)硪黄猇ue-resource攔截器判斷token失效跳轉(zhuǎn)的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue全局注冊與局部注冊兩種組件注冊的方式

    Vue全局注冊與局部注冊兩種組件注冊的方式

    本文主要介紹了Vue全局注冊與局部注冊兩種組件注冊的方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue如何設(shè)置定時器和清理定時器

    vue如何設(shè)置定時器和清理定時器

    這篇文章主要介紹了vue如何設(shè)置定時器和清理定時器,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue中使用rem布局代碼詳解

    vue中使用rem布局代碼詳解

    在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識點,需要的朋友們參考下。
    2019-10-10

最新評論