3. Navigator issues with Vue JS

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Navigator issues with Vue JS


  • Hi, I’ve recently set up a project using the Vue CLI 3.x command and I’m trying to get the Onsen UI navigator (https://onsen.io/v2/api/vue/v-ons-navigator.html) to work inside my .vue files.

    I have a views/Home.vue file which comes with the project by default, and am trying to get the navigator to work with another page (e.g: views/About.vue).

    I’ve tried linking to another page, the function is working and the new page is loading however there is no animation. Here’s my code:

    This is my vue file:

    <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>
    0