时间戳

首页 > 解决方案 > Vue：如何显示多个全局路由器视图

vue.js - Vue：如何显示多个全局路由器视图

问题描述

我正在尝试设置多个路由器视图以显示登录模式，并且我不想使用嵌套路由，因为此模式应该可以从任何我是我的应用程序的软件中访问，并且它不应该更改当前查看的组件。怎么做？

应用程序.vue

  <v-app>
    <v-app-bar app color="white" height="auto">
      <div style="width:100%" class="d-flex d-md-block">
        <v-row>
          <v-col cols="9" sm="10" md="12" class=" pa-0 order-md-1 order-2">
            <AppHeader />
          </v-col>
          <v-col
            cols="3"
            sm="2"
            md="12"
            class="pa-0 order-md-2 order-1 d-flex align-center"
          >
            <Menu />
          </v-col>
        </v-row>
      </div>
    </v-app-bar>
    <router-view class="content__holder" />
    <router-view name="modal" />
    <MpFooter />
  </v-app>
</template>

<script>
import AppHeader from "./components/AppHeader";
import Menu from "./components/menu.vue";
import MpFooter from "./components/MpFooter";

export default {
  name: "App",

  components: {
    Menu,
    AppHeader,
    MpFooter,
  },
  data: () => ({
    //
  }),
};
</script>```

标签： vue.jsvue-router

解决方案

如果应该可以从应用程序中的任何位置访问它，您可能会考虑使用Vuex。这样，您可以<Modal />在 app.vue 中拥有一个实例，并通过 Vuex 从任何地方操作模态状态

推荐阅读