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.


Log in to reply