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>