Question

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

我有一个警告的空白页

ion-split-pane-ios.entry.js？f0b4：45 [不建议使用] [ion-split-pane]不建议使用[main]属性，请改用“ contentId”属性

希望你能帮助我。

App.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>

Menu.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>

Home.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>

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

Vue.js和Ionic侧面菜单的空白页

0 个答案: