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

Question

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

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 不知道你只想在路由组件触发。）

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

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

Answer 1

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

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

---

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

Answer 2

全局的 beforeRouteEnter 可以给next传入回调，来获取进入页面的实例，然后就可以操作了