vue3 里如何给每个路由组件一个共同的调用函数？

作者站长头像
站长
· 阅读数 23

问题场景：接到一个需求：类似于网站访问量计数的功能。

  1. 有一个全局变量 count 默认值为 0。
  2. 现在有 A 、B 、C 三个页面。
  3. 当 A 挂载完毕以后，执行 count++ ，B 挂载完以后 count ++， C同理 ...

现在我的解决方法是封装了一个函数，然后在这三个页面的 onMounted 里调取这个函数。

但是我又思考，🤔以后还会有 D E F 页面，那随着页面的增多，我就需要在每个页面都调取一下子。

尝试解决

  1. 最开始我尝试使用 mixin 来解决

    const app = create(xxx) //省略部分代码
app.mixins({
mounted(){
count++
}
})
  2. 但是我发现一个问题，这个功能不仅仅会在路由组件里执行，会在每一个单独的小组件都会执行一次。（ 就好比我的 A 页面里使用了几个零碎的小组件，那么这几个小组件也会触发 mixin,想想也很合理，vue 不知道你只想在路由组件触发。）

有没有更好的解决方案呢？

  1. 从路由的 onBeforeEach 或者 onAfterEach 无法解决这个问题，因为某些原因，我需要在拿到组件实例对象以后进行某些操作，但是在路由这个时机我好像拿不到？不确定是否用法有误
回复
1个回答
avatar
test
2024-06-28

路由钩子里其实是可以拿到组件实例的：

router.beforeEach((to, from, next) => {
    next(vm => {
        console.log(vm); // vm 就是这个路由组件的实例
    });
});

但我不太明白你这里的 “因为某些原因，我需要在拿到组件实例对象以后进行某些操作” 具体指的是什么？或许你可以举一个具体的例子，可能未必真的需要这么写。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容