New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add page routing to VueRouter #11

Closed
rigor789 opened this Issue Apr 22, 2017 · 13 comments

Comments

4 participants
@rigor789
Member

rigor789 commented Apr 22, 2017

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.

@rigor789

This comment has been minimized.

Member

rigor789 commented Apr 24, 2017

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 rigor789 changed the title from Test if Vue-router works out of the box / implement it otherwise to Add page routing to VueRouter Apr 24, 2017

@rigor789

This comment has been minimized.

Member

rigor789 commented Apr 26, 2017

Related to #18 since it would use that internally

@jlooper

This comment has been minimized.

Collaborator

jlooper commented May 22, 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!

@rigor789

This comment has been minimized.

Member

rigor789 commented May 22, 2017

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

This comment has been minimized.

Collaborator

jlooper commented May 22, 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?

@vjoao

This comment has been minimized.

vjoao commented Jul 10, 2017

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

rigor789 added a commit that referenced this issue Aug 6, 2017

Added basic Page routing, WIP for #11
This is a hacky solution, looking into refactoring to a proper (better) solution.

@rigor789 rigor789 added in progress and removed help wanted labels Oct 15, 2017

@rigor789

This comment has been minimized.

Member

rigor789 commented Oct 16, 2017

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

This comment has been minimized.

Member

rigor789 commented Oct 16, 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.

@koddr

This comment has been minimized.

koddr commented Nov 14, 2017

@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

This comment has been minimized.

Member

rigor789 commented Nov 14, 2017

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

@koddr

This comment has been minimized.

koddr commented Nov 15, 2017

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

@rigor789

This comment has been minimized.

Member

rigor789 commented Nov 19, 2017

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

@rigor789 rigor789 closed this Nov 24, 2017

@rigor789

This comment has been minimized.

Member

rigor789 commented Nov 24, 2017

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

@rigor789 rigor789 added done and removed in progress labels Nov 24, 2017

@nativescript-vue nativescript-vue locked as resolved and limited conversation to collaborators May 22, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.