Vue原始碼學習之VueRouter極簡實現

在拉鉤訓練營學習已經有一段時間了，感覺這段時間的收穫遠比自己獨自學習強的多，自己學習的時候經常會因為惰性，無法堅持，在這裡有班主任時刻關注你的學習進度(感覺對我這種懶人蠻好的)，最重要的是有了乙個學習的計畫，不用無頭蒼蠅一樣東一點西一點，最後什麼都沒記住。學習都是需要方法和技巧的，在訓練營會有專業的老師為你答疑解惑，同時會教你解決問題的思路及方法，讓你能夠觸類旁通。這篇文章主要是vue原始碼中vuerouter的模擬實現：

最近在學習使用vuerouter的原始碼，這裡簡單介紹下vuerouter的實現

下面是具體**：

main.js 入口檔案

import vue from
'vue'
import router from
'./router'
//router中匯出的vuerouter例項
vue.config.productiontip =
false
newvue()
.$mount
()

上面是vue專案的入口檔案，從router中引入的vuerouter的例項，然後作為引數例項化乙個vue例項

router.js

import vue from
'vue'
// import vuerouter from 'vue-router'
import vuerouter from
'../sourcecode/router'
//vuerouter實現的原始碼
import home from
'../views/home.vue'
vue.
use(vuerouter)
const routes =[,
]const router =
newvuerouter()
export
default router

上面是vuerouter的具體使用，我們在這獲取vuerouter的相關引數

原始碼具體實現（我們在使用vuerouter時先使用vue.use引入，執行其中的intsall，然後在匯出乙個例項化的vuerouter物件）

install方法

initroutemap

initcomponents

initevent

…/sourcecode/router.js

let _vue =
null
export
default
class
vuerouter
//路由位址元件鍵值對
this
.mode = options.mode ||
'hash'
this
.data = _vue.
observable()
//建立響應式物件每當位址變化因為是響應式物件，觸發router-view元件的更新
}//vue的建構函式 args可選引數
static
install
(vue)
vuerouter.install.installed =
true
//2.將vue建構函式記錄到全域性變數
_vue = vue
//3.建立vue例項時傳入的router物件注入到所有vue例項
//混入
_vue.
mixin(}
,})}
initroutemap()
)}initcomponents
(vue)
,// this指向的是當前元件vue例項
render
(h),};
if(this
.$router.mode ===
"history")}
returnh(
'a', props,
[this
.$slots.
default])
},methods:},
})vue.
component
('router-view',}
)}init()
initevent()
)}elseif(
this
.mode ===
'hash'))
}}}

Vue原始碼學習之VueRouter極簡實現

Vue原始碼學習之initEvents

vue原始碼學習

Vue原始碼之createElement函式（五）

Vue原始碼學習之VueRouter極簡實現

Vue原始碼學習之initEvents

vue原始碼學習

Vue原始碼之createElement函式（五）

相關推薦