Nativescript-vue: Add page routing to VueRouter

Created on 23 Apr 2017 · 13Comments · Source: nativescript-vue/nativescript-vue

We need to see if vue-router can work out of the box, using the abstract history mode.

Changing contents of a page should work since that relies on node-ops, but there is probably need to change to whole different pages.

enhancement

Source

rigor789

Most helpful comment

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

vjoao on 10 Jul 2017

👍7

All 13 comments

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.

rigor789 on 24 Apr 2017

👍1

Related to #18 since it would use that internally

rigor789 on 27 Apr 2017

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!

jlooper on 22 May 2017

👍1

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.

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

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

rigor789 on 22 May 2017

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?

jlooper on 22 May 2017

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

vjoao on 10 Jul 2017

👍7

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()

rigor789 on 16 Oct 2017

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 on 16 Oct 2017

👍3 😕1

@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.