开放模式在路由器-链接Vue 3？

Question

如下所示，我有由路由器链接组成的按钮.但是我想在计算器按钮中打开一个模态。当我运行下面的代码时，所有的按钮都被转换成模式。但我只想让计算器按模态打开。

这里输出

​

​

这里是路由器-链路

  <div class="container menu-title">
      <div class="shortcuts-horizontal pt-2 pb-2">
        <template v-for="(menuItem, j) in item.shortcuts" :key="j">
          <div class="menu-item btn-margin">
            <router-link
              class="menu-link shortcut-btn"
              active-class="active"
              :to="menuItem.route || menuItem.modal"
              data-bs-toggle="modal"
              data-bs-target="#calculator"
            >
              <span v-if="menuItem.svgIcon" class="menu-icon svg-margin">
                <span class="svg-icon svg-icon-4">
                  <inline-svg :src="menuItem.svgIcon" />
                </span>
              </span>
            </router-link>
          </div>
        </template>
      </div>
    </div>

这里模态

  <div class="modal fade" tabindex="-1" id="calculator">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
              </div>
            </div>
          </div>
        </div>

在这里menu.ts

 shortcuts: [
      {
        route: "/activities/add/",
        svgIcon: "/media/icons/duotune/art/art002.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/quotes/add/",
        svgIcon: "/media/icons/duotune/finance/fin010.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/price-analysis/add/",
        svgIcon: "/media/icons/duotune/graphs/gra004.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/projects/add/",
        svgIcon: "/media/icons/duotune/abstract/abs027.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        modal: "#calculator",
        svgIcon: "/media/icons/duotune/finance/fin007.svg",
        fontIcon: "bi-app-indicator",
      },
    ],

Answer 1

我将modals定义为路由器视图中的子组件，并使用<Teleport to="#modals">作为弹出窗口在我的内容上呈现它。

路由器元素：

{
      path: '/',
      name: 'Home',
      component: YourPage,
      children: [
        {
          path: 'calculator',
          component: CalculatorModal,
        }
      ]
    }

你的模式

 <Teleport to="#modals">
        <div class="modal fade" tabindex="-1" id="calculator">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                  </div>
                </div>
              </div>
            </div>
    </Teleport>