>[success] # VueRouter -- 實現簡單Router * 說明本節內容代碼來自拉勾大前端課程內容 ~~~ 1.想看懂本章節內容，推薦優先看上一個章節中對一些知識點概念化講解 ~~~ >[info] ## 實現一個簡單的Router ~~~ 1.在上一個章節，可以明確知道當想使用'Vue Router' 路由的時候需要Vue.use，use方法在調用的時候 其實調用的是注冊插件的isntall方法，現在可以明確要寫的簡單'Router' 內部必須有一個'install'方法 2.關于整個類的參數定義介紹 'data': options - 記錄構造函數中傳入的對象 data - 是一個對象包含current 記錄當前的路由地址， 調用Vue.observable方法將其設置為響應式對象 routeMap - 記錄路由地址與組件的對應關系，將路由規則解析到這里 'methods': +號是公共方法 _ 是靜態方法 +Constructor(Options): VueRouter - 初始化options _install(Vue): void - 實現vue插件的機制 +init(): void - 用于調用下面三個方法 +initEvent(): void - 用于實現popState方法, 監聽瀏覽器歷史的變化 +createRouteMap(): void - 初始化routemap屬性，將options轉換成鍵值對存儲到routemap中 ， 鍵為路由地址，值為對應組件 +initComponents(Vue): void - 創建router-link 和 router-view兩個組件 ~~~ >[danger] ##### 分析 install 方法知識點 ~~~ 1.isntall雖然是一個方法但是他也是一個對象，我們這里直多添加一個'installed' 來防止插件被多次注冊 2.再用 _Vue.mixin 作為全局混入，還需要將router 實例綁定在'$route'屬性上,'$options 存儲構造函數的傳入參數' 所以'Vue.prototype.$router = this.$options.router' 3.'this.$options.router' 原因因為全局混入所有的組件在'beforeCreate' 聲明周期的時候都會執行，此時只想 在跟Vue實例時候執行我們這次綁定，只有根時候才有'this.$options.router' 避免了重復執行 ~~~ ~~~ // 實現Vue插件機制 static install(Vue) { // 1. 判斷當前插件是否被安裝 用于是否需要安裝 if (VueRouter.install.installed) { return } VueRouter.install.installed = true // 2. 把Vue構造函數記錄到全局變量 用于使用Vue構造函數相關方法 _Vue = Vue // 3. 創建Vue實例時傳入的router對象注入到所有的Vue實例中 可以使用this.$router // _Vue.prototype.$router = this.$options.router // this指向VueRouter // 使用混入獲取Vue實例 所有Vue實例混入選項 _Vue.mixin({ // beforeCreate鉤子，實例創建前執行，添加router對象 beforeCreate() { // Vue實例執行 Vue組件不執行 避免重復執行 if (this.$options.router) { _Vue.prototype.$router = this.$options.router this.$options.router.init() } } }) } ~~~ >[danger] ##### initComponents ~~~ 1.這里還需要創建'router-link'和'router-view ' 兩個組件，配合路由的使用 ~~~ ~~~ // 創建兩個組件 router-link與router-view initComponents(Vue) { // 創建router-link 接收路由地址 并且本質為超鏈接 // 此處超鏈接跳轉會向服務器發送請求 單頁面不需要發送服務器請求 // 因此攔截超鏈接跳轉并修改地址欄中的地址 使用history.pushState 并且將記錄到data中current中 Vue.component('router-link', { props: { to: String }, // 使用插槽，在使用時會將內容填充到插槽中 // 運行時版本 不支持template // template: '<a :href="to"><slot></slot></a>' render(h) { // h函數傳入三個參數 第一個為創建標簽 第二個為標簽屬性或事件 第三個參數為為數組 是生成元素的子元素 return h('a', { // 標簽屬性 attrs: { href: this.to }, // 注冊點擊事件 on: { click: this.clickHandler } // 獲取默認插槽的值 未起名 }, [this.$slots.default]) }, // 事件處理的方法 methods: { clickHandler(e) { // 改變地址欄中的地址 不發送服務器請求 history.pushState({}, '', this.to) // 將地址記錄到當前路由數據中 this.$router.data.current = this.to // 阻止事件的默認行為 e.preventDefault() } } }) // 存儲vuerouter實例 const self = this // 創建router-view 占位符 根據當前路由地址渲染相應路由 Vue.component('router-view', { render(h) { // 找到當前路由地址 然后再routeMap對象中查找對應的組件 const component = self.routeMap[self.data.current] // 然后調用h函數轉換為虛擬Dom直接返回 return h(component) } }) } ~~~ >[danger] ##### 整體代碼 ~~~ // 記錄傳入的Vue 構造函數 let _Vue = null export default class VueRouter { // 實現Vue插件機制 static install(Vue) { // 1. 判斷當前插件是否被安裝 用于是否需要安裝 if (VueRouter.install.installed) { return } VueRouter.install.installed = true // 2. 把Vue構造函數記錄到全局變量 用于使用Vue構造函數相關方法 _Vue = Vue // 3. 創建Vue實例時傳入的router對象注入到所有的Vue實例中 可以使用this.$router // _Vue.prototype.$router = this.$options.router // this指向VueRouter // 使用混入獲取Vue實例 所有Vue實例混入選項 _Vue.mixin({ // beforeCreate鉤子，實例創建前執行，添加router對象 beforeCreate() { // Vue實例執行 Vue組件不執行 避免重復執行 if (this.$options.router) { _Vue.prototype.$router = this.$options.router this.$options.router.init() } } }) } // Vue Router 構造函數 返回Vue Router // 初始化vue router 三個屬性 constructor(options) { // vue router 規則 this.options = options // 將規則以鍵值對的方式存儲 鍵為路由地址 值為路由組件 // 根據鍵值對查找路由組件進行渲染 this.routeMap = {} // 響應式對象 current用于記錄當前路由地址 默認為‘/’根目錄 // Vue.observable()將傳入對象轉換為響應式對象 this.data = _Vue.observable({ current: '/' }) } // 將下面的初始化方法整合到一起 init() { this.createRouteMap() this.initComponents(_Vue) this.initEvent() } // 將options路由規則轉換為鍵值對存儲 createRouteMap() { // 遍歷所有路由規則，把路由規則解析成鍵值對的形式存儲到routeMap中 this.options.routes.forEach(route => { this.routeMap[route.path] = route.component }) } // 創建兩個組件 router-link與router-view initComponents(Vue) { // 創建router-link 接收路由地址 并且本質為超鏈接 // 此處超鏈接跳轉會向服務器發送請求 單頁面不需要發送服務器請求 // 因此攔截超鏈接跳轉并修改地址欄中的地址 使用history.pushState 并且將記錄到data中current中 Vue.component('router-link', { props: { to: String }, // 使用插槽，在使用時會將內容填充到插槽中 // 運行時版本 不支持template // template: '<a :href="to"><slot></slot></a>' render(h) { // h函數傳入三個參數 第一個為創建標簽 第二個為標簽屬性或事件 第三個參數為為數組 是生成元素的子元素 return h('a', { // 標簽屬性 attrs: { href: this.to }, // 注冊點擊事件 on: { click: this.clickHandler } // 獲取默認插槽的值 未起名 }, [this.$slots.default]) }, // 事件處理的方法 methods: { clickHandler(e) { // 改變地址欄中的地址 不發送服務器請求 history.pushState({}, '', this.to) // 將地址記錄到當前路由數據中 this.$router.data.current = this.to // 阻止事件的默認行為 e.preventDefault() } } }) // 存儲vuerouter實例 const self = this // 創建router-view 占位符 根據當前路由地址渲染相應路由 Vue.component('router-view', { render(h) { // 找到當前路由地址 然后再routeMap對象中查找對應的組件 const component = self.routeMap[self.data.current] // 然后調用h函數轉換為虛擬Dom直接返回 return h(component) } }) } // 注冊popState事件 處理前進和后退沒有加載相應組件的問題 initEvent() { window.addEventListener('popstate', () => { // 此處this指向vuerouter // 將data中當前路由指向更改 this.data.current = window.location.pathname }) } } ~~~