VueRouter -- 实现简单Router · Vue&&TypeSprict--基础总结

>[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 }) } } ~~~