VueRouter导航守卫如何控制组件？

Question

App.vue

<template>
<v-app>
    <router-view />
    <my-popup v-if="show" />
</v-app>
</template>

main.js

router.beforeEach((to, from, next) => {
    if (true) {
        // 需要调用my-popup组件
    }
    else next()
})

如上，在main.js的导航守卫中，使一个自定义的组件显示/隐藏

如果注册全局组件的话，是可以调用的，但是加载到DOM结尾而不是<v-app>组件内，就无法使用Vuetify的相关组件了（比如主题和图标）

需求是在路由中拦截，弹出自定义的弹窗组件，组件内要能使用Vuetify

请问应该怎么做？

Answer 1

利用好 Vuex
Vuex 文档

App.vue

<template>
    <v-app>
        <router-view />
        <my-popup v-if="showPopup" />
    </v-app>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    // ...
    computed: {
        ...mapGetters('global', ['showPopup'])
    }
}
</script>

main.js

import VueRouter from 'vue-router'
//=> 配置路由
const router = new VueRouter({  routes: [  {  path: '/',  name: 'main',  component: () => import('../views/index/index.vue')  }

// ↓ 解决方案 ↓
router.beforeEach((to, from, next) => {
    if (true) {
        // 需要调用my-popup组件
        router.app.$store.commit( 'global/showPopup', true )
    }
    else next()
})

Answer 2

1、用vuex，state中定义show，在beforeEach更新一下show
2、订阅发布模式，最简单的方式就是直接通过new Vue()新建一个实例，vue自身提供了订阅发布模式的实现