javascript - 带有 Vue.js 和 Ionic 侧边菜单的空白页面

Question

我将 Vue.js 与 Ionic 一起使用，我对站点菜单的良好做法感到非常困惑。（我也在使用打字稿。）

我得到一个带有警告的空白页

ion-split-pane-ios.entry.js?f0b4:45 [DEPRECATED][ion-split-pane] 不推荐使用 [main] 属性，请改用“contentId”属性

我希望你能帮助我。

应用程序.vue：

<template>
    <ion-app>
      <ion-split-pane>
        <Menu/>
        <ion-vue-router main :animated="false" id="menu-content" />
      </ion-split-pane>
    </ion-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Menu from "./components/Menu.vue";

@Component({
  components: {
    Menu
  }
})

export default class App extends Vue {}
</script>

菜单.vue：

<template>
  <ion-menu contentId="menu-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
</template>



<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  export default class Menu extends Vue {}
</script>

主页.vue：

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
export default class Home extends Vue {}
</script>

在我看来，这是正确的方法，但我不知道..啊哈谢谢

标签： javascripttypescriptvue.jsionic-framework