如何在ionic6 vue中使用嵌套的ion-router-outlet？

Question

我有以下路由器设置：

{
name: "settings",
path: "/settings",
component: () => import("@/views/SettingsPage.vue"),
children: [
  {
    path: 'profile',
    component: () => import("@/views/ProfileSettingsPage.vue"),
  },
  {
    path: 'app',
    component: () => import("@/views/AppSettingsPage.vue"),
  },
],
beforeEnter: authCheck,
},

我的app.vue：

    <template>
      <ion-app>
        <ion-content ref="content" class="ion-padding" fullscreen="true">
        <ion-router-outlet id="main" class="mt-16" />
      </ion-content>
    </ion-app>
  </template>

然后我希望我的孩子路线在 SettingsPage.vue 中呈现：

    <template>
      <ion-page>
        Settings Page
        <!--Component to Navigate between Sub Settings-->
        <ion-router-outlet class="inner-router"></ion-router-outlet>
      </ion-page>
    </template>

显示了子组件，但离子样式使它们处于绝对位置。我尝试使用应用的“内部路由器”类更改 CSS，但在滚动 app.vue 中的离子内容时遇到更多问题

这是我想要的结果的示例：

    +------------------+                  +-----------------+
    | Settings         |                  | Settings        |
    | +--------------+ |                  | +-------------+ |
    | | Profile      | |  +------------>  | | App         | |
    | | ...          | |                  | | ...         | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+

在子组件配置文件和应用程序之间切换不应重新启动外部设置页面，这就是我尝试这样设置的原因。

感谢您的帮助！

我使用的CSS：

<style lang="scss">
    .inner-router {
        inset: inherit;
        position: inherit;
        contain: inherit;
        overflow: inherit;
        z-index: inherit;
        --overflow: auto;
        display: block;
        position: relative;
        flex: 1 1 0%;
        width: 100%;
        height: auto;
        contain: inherit;
        margin: auto !important;
        padding: auto !important;

    .ion-page {
        inset: inherit;
        position: inherit;
        contain: inherit;
        overflow: inherit;
        z-index: inherit;
    }
}
</style>

显然，使用我的代码，该路由器出口中的第一页似乎可以正确设置动画。

Answer 1

我写了一个演示来解释

<ion-router-outet/>

如何与嵌套路由器一起使用：

请注意以下要点：

• ⚠️关键点01

  • <ion-page><ion-content>PageContentHTML</ion-content></ion-page>

    是页面单位，特别是

    <ion-router-outlet/>

  • 单独使用

    <ion-content/>

    会导致

    ionic router

    无法识别路由页面。

  • 所以在router中注册的每个组件，即使只是页面中的子视图，仍然必须使用

    <ion-page><ion-content>

    组合单元

  参考文献： https://ionicframework.com/docs/vue/navigation#ionpage

  IonPage 组件将每个视图包装在 Ionic Vue 应用程序中，并允许页面转换和堆栈导航正常工作。使用路由器导航到的每个视图都必须包含 IonPage 组件

  app.vue:
  
      <template>
        <ion-app>
          <ion-page> 👈 NEW
           <ion-content ref="content" class="ion-padding" fullscreen="true">
            <ion-router-outlet id="main" class="mt-16" />
           </ion-content>
          </ion-page>
        </ion-app>
      </template>
  
  SettingsPage.vue
  
      <template>
        <ion-page>
         <ion-content> 👈 NEW
          Settings Page
          <!--Component to Navigate between Sub Settings-->
          <ion-router-outlet class="inner-router"></ion-router-outlet>
         </ion-content>
        </ion-page>
      </template>
  

• ⚠️关键点02

  • <ion-router-outlet/>

    节点的默认属性类似于

    position: aboslute

  • 因此父容器页面需要设置

    position: relative

    以使子页面在指定区域内渲染，而不是填充整个父页面。

• ⚠️要点03

  • 为了构建不需要路由器ANIMATION也不需要KEEP-ALIVE的网络应用程序，我们可以将所有页面的

    <ion-router-outlet/>

    替换为

    <router-view/>

    。

    注：

    • 一个App只能使用

      <ion-router-outlet/>

      <router-view/>

      中的一个选项，混合使用会导致渲染问题。

    比较：

    • <router-view/>

      有较少的限制和较少的默认行为，我们可以使用

      div

      或任何你喜欢的元素来编写子页面。

    在转发或重定向时，

    • <ion-router-outlet/>

      会将路由器页面 DOM 保留在

      <ion-router-outlet/>

      中，我们可以通过浏览器 DevTools 看到它。相比之下，

      <router-view/>

      在路由时不会保留页面 DOM。

  参考文献： https://router.vuejs.org/guide/