Vue-- 实现简单版 vue-router

最新推荐文章于 2024-07-12 15:14:43 发布

逍康

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量705

点赞数 10

分类专栏：源码系列文章标签： vue.js

本文链接：https://blog.csdn.net/lsk222/article/details/136714987

版权

源码系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中实现简单版本的VueRouter3，主要涉及监听hash值变化、响应式数据处理以及如何在组件间传递当前路由信息。通过Vue插件机制，全局注册`router-link`和`router-view`组件，确保路由状态的变化能自动更新视图。

摘要由CSDN通过智能技术生成

实现简单版vue-router3

前置知识：

1、vue 插件机制：

vue.use(arg) arg可以是一个函数和对象，需要有一个install方法，如果是函数（没有install方法），则直接执行该函数。install 方法第一个参数是 Vue 构造函数

思路（以hash为例）

1、监听hash值改变，触发 router-view 更新

2、如何在每个router-view 中拿到当前地址和组件的对应关系，以及如何在hash值改变时自动更新（本文思路是将 routeOptions 挂载在Vue实例上）

注：

Vue.util.defineReactive(this, 'current', init)

此方法是为了实现current响应式，只有current是响应式数据， router-view 里面的 render 函数才会随着数据变化而变化（当路由变化的时候this.current 改变）

let Vue
class VueRouter {
  constructor(options) {
    console.log(options)
    let init = '/'
    // Vue.util.defineReactive(this, 'current', window.location.hash.slice(1))
    Vue.util.defineReactive(this, 'current', init)  // 实现响应式
    this.current = '/'  // 当前路径
    this.routes = options.routes || []
    this.mode = options.mode || 'hash' // 路由模式 hash 或者 history
    this.init()
  }
  init() {
    if (this.mode === 'hash') {
      location.hash = '/'
      // 项目第一次加载
      window.addEventListener('load', () => {
        this.current = location.hash.slice(1)
      })
      window.addEventListener('hashchange', () => {
        this.current = location.hash.slice(1)
      })
    }
  }

}

// install 居然在 constructor 先执行
VueRouter.install = function (_Vue) {
  console.log(_Vue)
  Vue = _Vue
  // 给调用组件添加一个属性router
  Vue.mixin({  // 每一个组件都会执行 beforeCreate 方法
    beforeCreate() {
      if (this.$options.router) { // 只有根实例才有 router 属性
        console.log('jbjbjb----->')
        Vue.prototype.$router = this.$options.router
      }
    }
  })
  // 全局组件
  // 创建全局组件 router-link 
  Vue.component('router-link', {
    props: {
      to: { // router-link 的to 属性
        type: String,
      }
    },
    render(h) {
      console.log('router-link---->', this.to)
      return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
    }
  })
  // 创建全局组件 router-view 
  Vue.component('router-view', {
    render(h) { // 只有响应式数据变化才会 出发 render 方法
      console.log('router-view---->', this.$router)
      const current = this.$router.current
      const routes = this.$router.routes
      let com = routes.find((item) => {
        return item.path === current
      })
      return h(com.component)
    }
  })
}



export default VueRouter;