手寫vue router原始碼 實現屬於自己的路由

前端路由的兩種模式

hash模式

url中#後面的內容作為路徑位址

監聽hashchange事件

根據當前路由位址找到對應的元件重新渲染

history模式

通過history.pushstate()方法改變位址列

監聽popstate 事件

根據當前路由位址找到對應元件重新渲染

新建乙個沒有vue-router的vue專案

在專案中新建router相關檔案

新建乙個route資料夾，資料夾下新建乙個index.js，用於存放路由規則

import vue from 'vue'

import vuerouter from '../vuerouter'
//從我們自己的router中匯入vuerouter
import index from '../components/index.vue'
vue.use(vuerouter)
const routes = [,,
,]const router = new vuerouter()
export default router

別忘了在main.js中引用我們寫到的router

import vue from 'vue'

import router from './route'
vue.config.productiontip = false
new vue(
vuerouter.install.installed = true
// 把vue建構函式記錄到全域性變數
_vue = vue
// 把建立vue例項的時候傳入的router物件注入到vue例項上
//混入 mixed
_vue.mixin(,})}
}

constructor(options) // 用於儲存解析的router物件

this.data = _vue.observable()
// this.init()
}

createroutermap方法實現

這個方法的作用是把建構函式中傳入的路由規則轉變為鍵值對的形式，儲存到上文提到的routemap中

//遍歷所有的路由規則，解析路由規則變為鍵值對的形式，儲存到routermap裡

createroutermap())
}

initcomponents (vue) ,

// template:'
' render (h) ,
on:},[this.$slots.default])
},methods: ,'',this.to)
this.$router.data.current = this.to
e.preventdefault();}},
})const _this = this
vue.component('router-view', ,})}

initevent())

}

let _vue = null

export default class vuerouter 
vuerouter.install.installed = true
// 把vue建構函式記錄到全域性變數
_vue = vue
// 把建立vue例項的時候傳入的router物件注入到vue例項上
//混入 mixed
_vue.mixin(,})}
constructor(options) // 用於儲存解析的router物件
this.data = _vue.observable()
this.init()
}init()
//遍歷所有的路由規則，解析路由規則變為鍵值對的形式，儲存到routermap裡
createroutermap())
}initcomponents (vue) ,
// template:'
' render (h) ,
on:},[this.$slots.default])
},methods: ,'',this.to)
this.$router.data.current = this.to
e.preventdefault();}},
})const _this = this
vue.component('router-view', ,})}
initevent())}}

實現手寫簡單VueRouter原始碼

必須有乙個install方法，供vue.use呼叫 實現hash變化，響應式資料自動更新 let vue class vuerouter 快取route 和 path 的對映關係 this.options.routes.foreach route const initial window.locat...

vue router原始碼解讀

vue router是vue全家桶中的一員。當初學習的時候，因為內容比較簡單，只是匆匆瀏覽了一下文件就開始對照api幹活了，對history mode的實現也僅僅是知道用到了h5的history的方法。這次其實是為了看看vue router是怎麼用roll up打包的，但下下來之後發現 量很少，說白...

vue router原始碼隨筆

外掛程式執行入口 if inbrowser window.vue 外掛程式給vue物件例項暴露了兩個屬性 object.defineproperty vue.prototype,router this.routerroot在beforecreate中定義。object.defineproperty ...