Question

我正在使用vue-router，我正在尝试创建如下功能：

我希望能够在路由器路由中指定是否应该以模态呈现组件。如果它在Modal中呈现，请保持下面的每个组件（在模态掩码下）。我已经创建了一个模态包装器组件，它在模态体内有基本的模态结构和slot，所以我想渲染的组件应该放在slot中。但是如何实现这一目标。 Vue-Router是否具有该功能的选项。

路由器路由：

{
  path: '/customers/:clientId',
  component: customerView
  meta: {
    auth: true,
  },
},
{
  path: '/customers/:clientId/addAddress',
  component: dataViewAdd
  meta: {
    openInModal: true,
    auth: true,
  },
},

因为如果在覆盖前一个路由器视图的同时应该在模态内部渲染组件，我猜不好需要2个路由器视图。

<router-view class="normal-view"></router-view>
<router-view class="modal-view" name="modal-view"></router-view>

Answer 1

如果在每个模态路径中显示的组件未在非模态上下文中使用，则只需修改模态路径组件的模板（dataViewAdd），以便模态组件是模板的根。但是你提到过你会在不同的情况下重用这些组件（因此一条路线可能在模态中使用dataViewAdd而另一条路线可能在模态内使用dataViewAdd。

你可以创建每个组件的包装模式版本，但这会变得混乱;看起来你只想指定openInModal: true并让它适用于任何组件。

您还提到DOM中模态的位置无关紧要（否则我建议使用portal-vue之类的东西来帮助解决这个问题。）

首先，您需要更改路由器配置，以便模态路由是您希望在其下方保持可见的组件的子级。确保customerView内有<router-view>。

创建一个辅助函数，该函数返回组件的模态包装版本并将其用作路径组件。这不使用openInModal元属性，但它的工作方式类似。

以下代码未经测试。

import Modal from './modal.vue';

function wrapInsideModal(childComponent) {
  return {
    functional: true,
    render(h) {
      return h(Modal, [h(childComponent)]);
    },
  };
}

// Routes
{
  path: '/customers/:clientId',
  component: customerView,
  meta: {
    auth: true,
  },
  children: [
    {
      path: 'addAddress',
      component: wrapInsideModal(dataViewAdd),
    },
  ],
},

如果路径元数据键设置为true，则Vue将组件呈现为特定路径中的模态

1 个答案: