如何保持嵌套路由器视图在模态下可见

Question

我在 Vue3 应用程序上遇到问题。

我在

mainRouterView

里面有一个

modalRouterView

和一个

App.vue

。

mainRouterView

显示各种内容，包括子

bottomRouterView

，它显示所有主页面（主页、页面 A、页面 B 等）。

我需要在

modalRouterView

内部的所有内容之上显示模态，而不隐藏下面的内容。模态框可以从任何页面触发。

问题
当我打开模态框时，它们会正确显示，

mainRouterView

和

bottomRouterView

仍然在这里。但是

bottomRouterView

里面的内容就消失了。这意味着

Home

、

Page A

、

Page B

等不再显示。

问题
如何修复我的代码，以便

bottomRouterView

仍然显示其内容（

Home

、

Page A

、

Page B

等）？我认为问题来自于我的路由器中

default: Main

路线的

/modal

线，因为它不够具体。

结构

App.vue/
├── modalRouterView/
│   ├── Modal A
│   ├── Modal B
│   └── ...
└── mainRouterView/
    └── bottomRouterView/
        ├── Home
        ├── Page A
        ├── Page B
        └── ...

路由器

const routes = [
  {
    path: '/',
    component: Main,
    children: [
      {
        path: '',
        components: {
          bottomRouterView: Home,
        },
      },
      {
        path: 'page-a',
        components: {
          bottomRouterView: PageA,
        },
      },
      {
        path: 'page-b',
        components: {
          bottomRouterView: PageB,
        },
      },
    ],
  },
  {
    path: '/modal',
    components: {
      default: Main,
      modalRouterView: Modal,
    },
    props: true,
    meta: {
      showModal: true
    }
  },
];

莫代尔

<div v-if="showModal" class="modal-route">
  <div class="modal-content">
    <router-view name="modalRouterView"></router-view>
  </div>
</div>

mainRouterView实际上没有名称，我在帖子中命名它，以便更容易理解

<router-view :key="$route.fullPath"></router-view>

感谢您的阅读

Answer 1

我成功解决了这个问题

我已经在 App.vue 中给路由器起了一个名字（不认为它改变了任何东西，但它更清晰了）

<router-view name="mainRouterView"></router-view>

我已经编辑了路由器

const routes = [
  {
    path: '/',
    components: {
      mainRouterView: Main,
    },
    children: [
      {
        path: '',
        name: 'home'
        components: {
          bottomRouterView: Home,
        },
      },
      {
        path: 'page-a',
        name: 'page-a'
        components: {
          bottomRouterView: PageA,
        },
      },
      {
        path: 'page-b',
        name: 'page-b'
        components: {
          bottomRouterView: PageB,
        },
      },
      {
        path: 'modal',
        name: 'modal',
        components: {
          mainRouterView: Main,
          bottomRouterView: null,
          modalRouterView: Modal,
        },
        props: true,
        meta: {
          showModal: true
        },
        beforeEnter: (to, from, next) => {
          const previousRoute = from.name;
          let componentForBottomRouterView;

          switch (previousRoute) {
            case 'home':
              componentForBottomRouterView = Home;
              break;
            case 'page-a':
              componentForBottomRouterView = PageA;
              break;
            case 'page-b':
              componentForBottomRouterView = PageB;
              break;
            default:
              componentForBottomRouterView = Home;
          }
          const bottomRouterViewRoute = to.matched.find(route => route.name === 'modal');
          if (bottomRouterViewRoute) {
            bottomRouterViewRoute.components.bottomRouterView = componentForBottomRouterView;
          }

          next();
        },
      },
    ],
  },
];