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

  • Z时代
  • 2024-02-15
  • 分类：IT

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

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

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

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

尝试解决

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

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

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

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

回答：

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

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

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

回答：

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

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

以上是 vue3 里如何给每个路由组件一个共同的调用函数？ 的全部内容， 来源链接： utcz.com/p/934830.html

回到顶部