🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[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 }) } } ~~~