It passes the components in the new route to the navigator and it figures about the rest. The map function might need to be changed depending on the app. This example specifically assumes every route is a page (no small child views) and all of them use the default view.

Alternatively, it can also be used without Vuex in the same place where you declare your pageStack array:

The back buttons can simply run this.$router.go(-1) if the routes are linear (always parent -> child) or this.$router.push({name: this.$route.matched[this.$route.matched.length - 2].name}) if the routes can switch between sibling routes (routeA/child1 -> push -> routeA/child2 -> pop -> routeA/).

The performed animations depend on the pageStack length and the current top page. If the top page changed and the new route length is lower than the previous one, it will show a pop animation. Anything else is considered a push (or replace, with push animation). Therefore, if moving among child views (routeA/child1/ -> routeA/child2/), one should replace the routes. Otherwise, it will end up doing another push animation when going back with go(-1) since the length doesn’t change. I guess v-ons-tabbar is a better fit for that kind of route. v-ons-navigator should only take care of push-pop routes (routeA/child1 -> route1/child1/child1-1/).