模拟 VueRouter 1

回顾 VueRouter 的核心代码

js 复制代码
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {name: 'home', path: '/', component: Home}
  ]
})
new Vue ({
  router,
  render: h => h(App)
}).$mount("#app')

分析

Vue.use(VueRouter)

这里使用了 Vue 的插件机制,Vue.use 接收一个函数或者对象,如果是一个方法则直接调用,如果是一个对象则调用其 install 方法。install 方法接收 2 个参数,一个是 Vue 的构造函数,一个是可选的选项对象(这里不做设置)。

所以从这句话来看,我们可以将 VueRouter 看做一个有 install 静态方法的类。

且 插件是仅需要注册一次的,在 js 中,方法本身就是一个对象,那我们不妨在 install 方法上添加一个属性表明此组件是否被注册过。

在注册 VueRouter 插件的时候会传入 Vue 的构造函数,这个 Vue 在其他地方肯定还会用到,所以先将其存入到全局变量中。

js 复制代码
let _Vue = null
class VueRouter {
  static install (Vue) {
    // 判断当前插件是否已经被安装
    if (VueRouter.install.installed) return 
    VueRouter.install.installed = true
  }
  // 把 Vue 构造函数记录到全局变量中
  _Vue = Vue
}

new Vue ({ router )}

创建 Vue 根实例 的时候传入 router 选项,会往所有 Vue 实例上添加 $route$router 属性。

new Vue 执行的是 Vue 的构造函数,由于 VueRouter 只是一个插件,不会在 Vue 中的代码里实现添加 $router 的代码,也就是需要我们在 Vue.use(VueRouter) 注册 VueRouter 时,也就是在 install 方法里就将这部分代码写上,然后等待创建 Vue 根实例的时候再执行。

那执行的时机是什么呢?

js 复制代码
// 全局注入的混入,影响注册之后所有创建的 Vue 实例
_Vue.mixin({
     beforeCreate(){ ... }
})

怎么往所有 Vue 实例上添加属性呢?

js 复制代码
// 往 Vue 的原型上添加 $router 属性,则以后创建出来的 Vue 实例都会包含 $router 属性
_Vue.prototype.$router = this.$options.router

这段代码写在 beforeCreate 中,this 的值指向的就是 Vue 实例,那么 this.$options.router 就可以取到传入的 router 选项。

这段代码只需要在创建 Vue 根实例 的时候执行一次,只有这个时候才会传入 router 选项,组件也是 Vue 实例,但是在创建组件的时候不必执行。

js 复制代码
// 创建根实例时,往所有 Vue 实例上添加 $router 属性
_Vue.mixin({
  beforeCreate(){
       // 创建组件的时候不必执行
       if(this.$options.router){
           _Vue.prototype.$router = this.$options.router
       }
   }
})

new Vue ({ router )}创建根实例时会执行混入的 beforeCreate 钩子,这里传入的 router 会挂在 this.$options.router 上(this 此时就是创建出的根实例),将传入的 router 赋值给 _Vue.prototype.$router,就会在以后创建的所有 Vue 实例上添加 $router 属性。且此方法只会在创建根实例时执行一次,因为在创建组件时,不会传入 router 选项。

完整代码

js 复制代码
let _Vue = null
export default class VueRouter {
    static install(Vue){
        // 判断当前插件是否已经被安装
        if(VueRouter.install.installed) return
        VueRouter.install.installed = true
        // 把 Vue 构造函数记录到全局变量中
        _Vue = Vue
        // 创建根实例时,往所有 Vue 实例上添加 $router 属性
        _Vue.mixin({
            beforeCreate(){
                if(this.$options.router){
                    _Vue.prototype.$router = this.$options.router
                }
            }
        })
    }
}    
相关推荐
艾小码1 分钟前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;5 分钟前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴10 小时前
Lua 模块的完整入门指南
前端·lua