Как использовать Onsen UI Navigator Vue JS 2

Question

Я недавно настроил проект с помощью команды Vue CLI 3.x и пытаюсь настроить навигатор пользовательского интерфейса Onsen (https://onsen.io/v2/api/vue/v-ons-navigator.html) для работы внутри моих файлов .vue.

У меня есть файл views / Home.vue, который поставляется с проектом по умолчанию, и я пытаюсь заставить навигатор работать с другой страницей (например, views / About.vue).

Я пробовал ссылаться на другую страницу, функция работает, и новая страница загружается, но анимация отсутствует. Вот мой код:

Это мой файл Vue:

<template id="main">
  <v-ons-navigator swipeable
    :page-stack="pageStack"
    @push-page="pageStack.push($event)"
  ></v-ons-navigator>
</template>

<template id="page1">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Page 1</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      This is the first page
      <v-ons-button @click="push">Push Page 2</v-ons-button>
    </p>
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Page 1</v-ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </v-ons-toolbar>
    <p style="text-align: center">This is the second page</p>
  </v-ons-page>
</template>

<script>
  const page2 = {
    key: 'page2',
    template: '#page2'
  };

  const page1 = {
    key: 'page1',
    template: '#page1',
    methods: {
      push() {
        this.$emit('push-page', page2);
      }
    }
  };
  export default {
    name: 'dashboard',
    template: '#main',
    data() {
      return {
        pageStack: [page1]
      };
    }
  }
</script>