>[success] # vueRouter -- 简单实现 1. 这里实现按照 `router 3.x` 配合 `vue2.x `的一个简单实现模型 2. 如果你已经使用过 `vuerouter `或者正在学习如何使用，你要知道第一点就是为什么绑定在根实例上的`vuerouter `可以在任何组件都能调用它，以`vue2.x` 为例 ~~~ const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); const vm = new Vue({ router, // vue2 使用路由 ccc: 'ccc', render: h => h(App) }).$mount('#app') ~~~ * 此时`router `已经在`vue `实例上  * 注册组件`$opitions`中可以通过`$opitions`中的`parent `字段一级一级往上推找到最开始的根 `new Vue`这个对象，因此每个组件都能用到`vuerouter `实例  >[info] ## 简单实现 1. 关于整个类的参数定义介绍 ~~~ '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两个组件 ~~~ ~~~ // 实现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 }) } } ~~~