vue 手写一个vue-router

实现效果如下：

1. 准备好环境

使用 vue/cil 初始化项目配置：

npm install -g @vue/cli    //全局安装@vue/cli
vue create demo-vue        //创建项目

yarn add vue-router 安装vue-router创建一个router文件夹并使用：

2. 实现目的

router/index.js内容如下：（我们的目的将引入自写的vue-router实现vue路由跳转功能）

import vue from 'vue'
//import vueRouter from 'vue-router'       //使用官方 vue-router 插件
import vueRouter from './my-vue-router'    //使用我们直接实现的 vue-router 插件

vue.use(vueRouter)                         //此时执行 my-vue-router 内 install 方法

const routes = [
  {
     
    path: '/',
    redrect: '/a'
  },
  {
     
    path: '/a',
    name: 'a',
    component: () => import('../views/a.vue')
  },
  {
     
    path: '/b',
    name: 'b',
    component: () => import('../views/b.vue')
  }
]

const router = new vueRouter({
     
  mode: 'hash',        //哈希路由
  routes
})

export default router  //main.js 引入实例化的 router 添加至 this.$options.router 中

3. 实现原理

router/my-vue-router.js 实现过程如下：

let Vue //声明一个变量用来存储install内接收的vue实例 给 constructor 内调用

class vueRouter {
     
  constructor(options) {
     
    this.$options = options    //用于通过全局 this.$options.router.$options 获取

    const initail = window.location.hash.slice(1) || '/'
    Vue.util.defineReactive(this, 'current', initail)    //监听数据响应式渲染页面
    window.addEventListener('hashchange', () => {
             //监听哈希路由变化
      this.current = window.location.hash.slice(1)       //改变触发 render 渲染页面
    })
  }

  push() {
     
    console.log("跳转页面");
  }
}

vueRouter.install = function(_vue) {
     
  Vue = _vue

  Vue.mixin({
     
    beforeCreate() {
     
      if (this.$options.router) {
     
        Vue.prototype.$router = this.$options.router  	//将全局数据注入组件
      }
    }
  })

  Vue.component('router-link', {
                             //注册全局 router-link 组件
    props: {
     
      to: {
     
        type: String,
        required: true
      }
    },
    render(h) {
     
      return h(
        'a',
        {
     
          attrs: {
      href: '#' + this.to }
        },
        this.$slots.default
      )
    }
  })

  Vue.component('router-view', {
                             //注册全局 router-view 组件
    render(h) {
     
      console.log(" this.$router",  this.$router);
      const route = this.$router.$options.routes.find((route) => {
     
        return route.path == this.$router.current
      })

      return h(route.component)                        //将组件渲染返回
    }
  })
}

export default vueRouter

3. 使用手写vue-router：

a.vue 与 b.vue 可任意写

<template>
  <div id="app">
    <router-link to="/a">aaa</router-link> |
    <router-link to="/b">bbb</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
     
  name: 'App'
}
</script>