Popup弹出层 显示子路由界面

要在 Popup 弹出层中显示子路由界面，您可以使用 Vue Router 的嵌套路由功能。下面是一种实现方式：

1. 首先，您需要在主路由配置中定义一个占位符组件，用于渲染 Popup 弹出层。

const routes = [
  {
    path: '/popup',
    component: PopupContainer, // 占位符组件
    children: [
      {
        path: 'child',
        component: ChildComponent // 子路由组件
      }
    ]
  }
];

2. 创建一个占位符组件（PopupContainer），该组件负责渲染 Popup 弹出层，并在其中添加一个 `<router-view>` 标签，用于显示子路由组件。

<template>
  <Popup v-model="showPopup">
    <router-view></router-view> <!-- 子路由组件将在这里显示 -->
  </Popup>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    Popup,
  },
  data() {
    return {
      showPopup: false,
    };
  },
};
</script>

3. 创建一个子路由组件（ChildComponent），该组件将在 Popup 弹出层中显示。

<template>
  <div>
    <!-- 子路由组件的内容 -->
    <h2>子路由界面</h2>
    <p>这是子路由组件的内容。</p>
  </div>
</template>

4. 然后，您可以通过触发路由导航来显示 Popup 弹出层，让其显示子路由界面。

// 在某个方法中触发路由导航
this.$router.push('/popup/child');

当触发路由导航到 `/popup/child` 路径时，Popup 弹出层将显示，并在其中渲染子路由组件（ChildComponent）的内容。

请注意，您需要根据实际情况进行路由配置和组件的编写。上述示例仅为演示如何在 Popup 弹出层中显示子路由界面的基本思路。