如果路由元数据键设置为true，则Vue呈现组件在特定路由中作为模态呈现。

Question

我正在使用vue-路由器，并试图创建如下功能：

我希望能够在路由器路由中指定一个组件是否应该以模式呈现。如果它是在模态渲染，保持每一个组件下面(在模态掩码下)的原样。我已经创建了一个模态包装组件，它具有基本的模态结构，并且在其模态体中包含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),
    },
  ],
},