Vue router.beforeEach不触发组件更新

Question

我正在为vue应用制作加载程序，以通过router.beforeEach和router.afterEach切换到router.preloaderActive变量。然后在组件I中通过此变量“ v-if”预加载器。 afterEach正常工作，但组件无法检测到此。$ router.preloader由router.beforeEach进行的主动更改。

app.js
router.beforeEach((to, from, next) => {
    router.preloaderActive = true; // doesn't work 'cause component won't update
    return next();
});

router.afterEach( (to, from) => {
    router.preloaderActive = false;
});

app.vue
<transition name="fade">
   <div class="_loader" v-if="$router.preloaderActive">
       <i class="fa fa-gear fa-spin"></i>
   </div>
</transition>

编辑：问题是，beforeEach（）不会触发组件的更新，因此组件不会检测到变量的变化。有解决方案吗？