前言
通過上篇,我們知道前端理由的兩種實現(xiàn)方法,Hash 路由與 History 路由,并且用它們分別實現(xiàn)了一個前端路由。
接下來我們就將 Vue 與 Hash 路由結(jié)合,實現(xiàn)一個非常簡單的 vue-router 吧。
開始實現(xiàn)
想象一下,如果自己實現(xiàn)了一個 vue-router,會怎么去使用呢?參考 vue-router 官方的使用方式,看看 html 的使用:
<div id="app"> <p> <router-link to="#/">home</router-link> <router-link to="#/book">book</router-link> <router-link to="#/movie">movie</router-link> </p> <router-view></router-view> </div>
這里會有 router-link 和 router-view 兩個組件需要我們來實現(xiàn)。再來看 js 的:
const Home = { template: '<div>home</div>' }; const Book = { template: '<div>book</div>' }; const Movie = { template: '<div>movie</div>' }; const routes = [ { path: '/', component: Home }, { path: '/book', component: Book }, { path: '/movie', component: Movie } ]; const router = new VueRouter(Vue, { routes }); new Vue({ el: '#app' });
這里會有我們自己定義的組件 Home、Book 和 Movie,并且有它們各自對應的路由。我們實現(xiàn)的 VueRouter 跟官方的有些區(qū)別,在 VueRouter 被 new 時是將 Vue 作為參數(shù)傳入,而不是注入掛載到根實例下。
接下來就是 VueRouter 的實現(xiàn)了。
VueRouter
要怎么來實現(xiàn) VueRouter 呢,先提供一下實現(xiàn)的思路:
先創(chuàng)建一個 VueRouter:
class VueRouter { constructor (Vue, options) { this.$options = options; } }
綁定事件
給 VueRouter 添加一個綁定事件的方法,一旦路由發(fā)生改變,會觸發(fā) onHashChange
方法。
constructor (Vue, options) { this.init(); } // 綁定事件 init () { window.addEventListener('load', this.onHashChange.bind(this), false); window.addEventListener('hashchange', this.onHashChange.bind(this), false); }
路由映射表
將傳入的 options 設置成一張路由映射表,以便于通過路由查找到對應的組件。
constructor (Vue, options) { this.$options = options; this.routeMap = {}; this.createRouteMap(this.$options); } // 路由映射表 createRouteMap (options) { options.routes.forEach(item => { this.routeMap[item.path] = item.component; }); }
options 之中,路由與組件的關(guān)系:
const routes = [ { path: '/', component: Home }, { path: '/book', component: Book }, { path: '/movie', component: Movie } ];
生成的路由映射表:
this.routeMap = { '/': Home, '/book': Book, '/movie': Movie };
響應
我們需要 new 一個新的 Vue 實例,將當前路由 current 儲存在其 data 之中,當修改了 current 時,router-view 就會自己去更新視圖。
constructor (Vue, options) { this.app = new Vue({ data: { current: '#/' } }); } // 獲取當前 hash 串 getHash () { return window.location.hash.slice(1) || '/'; } // 設置當前路徑 onHashChange () { this.app.current = this.getHash(); }
只要在 router-view
里使用到了 this.app.current
,一旦更新它,便會更新。
注冊組件
router-link
實際上就是一個 <a> 標簽,點擊它便能觸發(fā) hashchange
。router-view
會實現(xiàn)一個 render 方法,將當前路由對應的組件取出,進行渲染。
constructor (Vue, options) { this.initComponent(Vue); } // 注冊組件 initComponent (Vue) { Vue.component('router-link', { props: { to: String }, template: '<a :href="to" rel="external nofollow" rel="external nofollow" ><slot></slot></a>' }); const _this = this; Vue.component('router-view', { render (h) { var component = _this.routeMap[_this.app.current]; return h(component); } }); }
完整代碼
至此,一個簡單的 vue-router 就出來了,全部代碼是這樣的:
class VueRouter { constructor (Vue, options) { this.$options = options; this.routeMap = {}; this.app = new Vue({ data: { current: '#/' } }); this.init(); this.createRouteMap(this.$options); this.initComponent(Vue); } // 綁定事件 init () { window.addEventListener('load', this.onHashChange.bind(this), false); window.addEventListener('hashchange', this.onHashChange.bind(this), false); } // 路由映射表 createRouteMap (options) { options.routes.forEach(item => { this.routeMap[item.path] = item.component; }); } // 注冊組件 initComponent (Vue) { Vue.component('router-link', { props: { to: String }, template: '<a :href="to" rel="external nofollow" rel="external nofollow" ><slot></slot></a>' }); const _this = this; Vue.component('router-view', { render (h) { var component = _this.routeMap[_this.app.current]; return h(component); } }); } // 獲取當前 hash 串 getHash () { return window.location.hash.slice(1) || '/'; } // 設置當前路徑 onHashChange () { this.app.current = this.getHash(); } }
最后
將 Vue 與 Hash 路由結(jié)合,監(jiān)聽了 hashchange 事件,再通過 Vue 的 響應機制 和 組件,便有了上面實現(xiàn)好了一個 vue-router。
全部源碼參考這里。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com