Add page routing to VueRouter

[nativescript-vue]

Add page routing to VueRouter

[vjoao]

Would be cool if NS core exposed some sort of routing abstraction for external frameworks to take advantage of.

[rigor789]

The previous is now implemented, the code needs some cleaning up and refactoring, but for the most part it works on both android and iOS.

On iOS however, there is a bug: if you go back, and try to go to the same route again, nothing happens.

I am pretty sure this is because the back button is navigating back natively, and the routers state is still on the previous route.

[rigor789]

This should be fully functional in 0.3.0 along with custom transitions #68

[rigor789]

VueRouter works out of the box, without any changes! However that's only for "navigating" on a single page. To add support for multiple pages (different activities) it requires some extra work.

[jlooper]

When you say 'multiple pages' what do you mean? I got the router using @tap="$router.push({ name:'recipe',params: {id: recipe.id} })" - following your router example. Works ok!

[rigor789]

Related to #18 since it would use that internally

[rigor789]

What I mean by pages is that it should allow for navigating to "brand new" instances of a Page, instead of removing all child elements of a single page, and repopulating it with the contents of the new page.

Similar to what ns-angular does https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#pages

router-outlet which is the current behavior with VueRouter inside nativescript-vue

and page-router-outlet which is the proposed feature!

[jlooper]

How do we handle the special needs of mobile routing, like handling the back button? When I use a back button on my android emulator to 'go back' - my app crashes on the emulator. Wondering if we have to use a strategy like we do in Angular, using RouterExtensions? - an enhanced mobile-friendly router?

[rigor789]

Update: Quite a bit of progress has been made today, mostly rewriting the older (hacky) implementation with a better solution.

Right now the <modal-page> component is a functional (stateless) component that registers the router hooks, and handles the back button event.

I am thinking of making this component do much less and extract the logic to the router-plugin.js.

The idea is that if the modal-page component is added to the root component, it simply toggles an option on the root instance, which makes the router use pages. This would serve as syntactic sugar, when you look at the component and see a <router-page> it tells what is going on...

This would be completely optional, and the option could be toggled manually, something like:

new Vue({
  pageRouting: true
}).$start()

[koddr]

@rigor789 Do you found any solutions for iOS back button bug? It's make me sad, because refactoring and testing app now is very difficult. Would be nice to disable this native option.

[rigor789]

@koddr I haven't had time to look into it, but it is high up on my todo list!

[koddr]

@rigor789 Nice to listen 👍 keep watching and support project anyway.

[rigor789]

@koddr I pushed some changes to the page routing, can you give it a shot? I tested it on iOS and Android and both seem to work as expected!