实现vue-router部分功能

前端  /  管理员 发布于 6年前   208

目的

为了了解路由的底层工作原理，自己参考资料，仿写了vue-router的部分功能。当然自己写的DEMO功能较粗糙，主要实现核心功能，其它功能有待完善、补充。

思路

参考vue-router，我们实现路由插件的api、组件尽量保持跟vue-router一样；

首先添加一个SRouter类，来模拟vue-router插件的功能，暂且不管类的实现；

提供router.js文件，然后new SRouter(options)，options传递的就是所有的组件路径以及路由访问路径，结构同使用vue-router，只是new的对象不一样，我们new的是自己实现的路由类；

接着来实现SRouter类，主要包括以下几步：
a. 首先在类中提供静态的intall函数，方便Vue.use调用，在里面来调用路由的初始化函数
b. 注册router-link、router-view组件
c. 监听hashchange事件，获取路由对应的组件，router-view装载对应的组件
d. 处理钩子函数
实现以上几步，可以满足路由的基本功能。

实现

主要贴出部分关键代码，具体可以参考源码地址

1. SRouter类：

a. 首先在类中提供静态的intall函数，方便Vue.use调用，在里面来调用路由的初始化函数
主要解释下intall里面为什么使用mixin，这是为了在创建vue实例后调用我们的路由初始化工作；然后constructor中使用new Vue()主要是为了使用vue的数据响应式，能自动检测到数据的变化；

   static install(_vue) {       Vue = _vue       Vue.mixin({           beforeCreate() {               //这里的router就是我们在new Vue的时候传递的router对象               if (this.$options.router) {                   Vue.prototype.$srouter = this.$options.router                   this.$options.router.init()               }           }       })   }   constructor(opitons) {       this.$options = opitons       this.routeMap = {}       this.app = new Vue({           data: {               current: '/'           }       })   }   //路由初始化函数   init() {       //启动路由       //1.初始化组件router-link router-view       this.initComponent()       //2.监听hashchange事件       this.handleEvents()       //3.处理路由       this.createRouterMap()       //3.处理钩子函数   }

b. 注册router-link、router-view组件

    //初始化组件 router-view router-link   initComponent() {       Vue.component('router-view', {           render: h => {               const component = this.routeMap[this.app.current].component               //使用h新建一个虚拟dom               return h(component)           }       })       Vue.component('router-link', {           props: {               to: String           },           render(h) {               return h('a', {                       attrs: {                           href: '#' + this.to                       }                   },                   [this.$slots.default]               )           }       })   }

c. 监听hashchange事件，获取路由对应的组件，router-view装载对应的组件

    //注册监听事件   handleEvents() {       window.addEventListener('hashchange', this.onHashChange.bind(this), false)       window.addEventListener('load', this.onHashChange.bind(this), false)   }   //监听hash改变   onHashChange(e) {       //路由跳转       let hash = window.location.hash.slice(1) || '/'       let router = this.routeMap[hash]       if (router && router.beforeEnter) {           let [from, to] = [e.oldURL?.split('#')[1], e.newURL?.split('#')[1] || '/']           router.beforeEnter(from, to, () => {               this.app.current = hash           })       } else {           this.app.current = hash       }   }

2. router.js文件，基本完全同vue-router的router.js文件，只是我们引入的是SRouter对象；

import Vue from 'vue'import SRouter from './s-router'Vue.use(SRouter)export default new SRouter({   routes: [       {           name: 'index',           path: '/',           component: () => import('./views/index'),           beforeEnter(from, to, next) {               //处理异步请求               setTimeout(()=>{                   next()               })           }       }, {           name: 'about',           path: '/about',           component: () => import('./views/about')       }   ]})

来自：https://my.oschina.net/u/4291402/blog/4321607