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.

Vue router not loading component

  • Hello, This is my first project using Onsen and Vue, I thought of adding router to have a better control but I am having difficulties implementing it…

    My main route consists of a carousel component, and the last item has a button with “@click=”$router.push(’/’)" which should take to a v-ons-page with a v-ons-tabbar (which loads the rest of pages). But when I click nothing loads just an empty content div, if I manually visit the route everything works fine.

    What am I doing wrong? Do you think my problem is in my router configuration (nothing unusual there anyways)?

    I appreciate your help.

  • Onsen UI

    @Andre-AM Hi! Are you connecting vue-router to v-ons-navigator for the page transitions? There is a demo here (source). To be honest, I think v-ons-navigator without a router is enough for most of the apps. You can have stack-based navigation (push/pop) and as many stacks as you want (they are simple arrays).

    Can’t really say anything else without seeing some code :sweat_smile:

  • Thanks for the info Fran. At the beginning I did stack a tabnavigator inside a navigator and it did work, but I wanted to separate both components (lets say a ‘slides’ component and ‘main app’ component) so logged users automatically skips ‘slides’. ‘Main app’ holds three other components which are loaded as tab pages, and they have deeper levels (like chat/123/) so I thought I could create a route like ‘slides/’. Is it posible to do something like… ‘Slides’ been a ons-navigator and somehow push user to another not related navigator?

    I will upload my code to github in a few hours so you may get a better idea and tell me a better approach to what I want.

    Thank you, have a nice day.