在路由器链接 Vue 3 中打开模式？

Question

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

这里output

这里路由器链接

  <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

我将模态定义为路由器视图中的子组件，并使用<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>