Vue Router深扒实现原理_vue.js_

// 注册插件 // Vue.use() 内部调用传入对象的 install 方法 Vue.use(VueRouter) // 创建路由对象 const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: homeComponent } ] }) // 创建 Vue 实例，注册 router 对象 new Vue({ router, render: h => h(App) }).$mount('#app') 

let _Vue = null export default class VueRouter { static install(Vue) { // 1. 判断插件是否已经安装，如果是的话，直接返回 if (Vue.install.installed) return Vue.install.installed = true // 2.将Vue的构造函数记录在全局 _Vue = Vue // 3.把创建Vue的实例传入的router对象注入到Vue实例 _Vue.mixin({ beforeCreate() { // 判断是否是实例，如果是实例就不用添加 if (this.$options.router) { _Vue.prototype.$router = this.$options.router } }, }) } }

constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) } 

// 注意，下面的代码只考虑了path和component对应，name同理，也可加上路由元信息，或者遍历加上children，但为便捷及个人水平考虑，并未完整实现 createRouteMap() { // 遍历所有的路由规则，把路由股则解析成键值对的形式，存储到routeMap中 this.options.routes.forEach(route => { this.routeMap[route.path] = route.component }) } 

initComponent(Vue) { Vue.component('router-link', { props: { to: String }, // template: `` render(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(); } }, }) const self = this Vue.component('router-view', { render(h) { const component = self.routeMap[self.data.current] return h(component) } }) }

initEvent(){ window.addEventListener("popstate",()=>{ this.data.current = window.location.pathname }) } 

let _Vue = null export default class VueRouter { constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) this.init() } static install(Vue) { // 1. 判断插件是否已经安装，如果是的话，直接返回 if (Vue.install.installed) return Vue.install.installed = true // 2.将Vue的构造函数记录在全局 _Vue = Vue // 3.把创建Vue的实例传入的router对象注入到Vue实例 _Vue.mixin({ beforeCreate() { // 判断是否是实例，如果是实例就不用添加 if (this.$options.router) { _Vue.prototype.$router = this.$options.router } }, }) } init() { this.createRouteMap() this.initComponent(_Vue) this.initEvent() } createRouteMap() { // 遍历所有的路由规则，把路由股则解析成键值对的形式，存储到routeMap中 this.options.routes.forEach(route => { this.routeMap[route.path] = route.component }) } initComponent(Vue) { Vue.component('router-link', { props: { to: String }, // template: `` render(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(); } }, }) const self = this Vue.component('router-view', { render(h) { const component = self.routeMap[self.data.current] return h(component) } }) } initEvent() { window.addEventListener('popstate', () => { this.data.current = window.location.pathname }) } }