impossible to pass props & have meta on components in PageStack on v-ons-navigator

[darkylmnx]

Hey guy’s i have an issue here perhaps someone got the same
with v-ons-navigator with **Vue ** it’s kind difficult to add Auth because the page-stack prop only takes component definitions instead of Route / State definitions.

Something like vue-router does would be nice

{
    name: 'home',
    component: Page,
    meta: { auth: true /* custom values, used by auth... */}
}

And the in another component do something like

<v-ons-button
    @click="$navigator.pushState('home', {id: 8} /* would be the props to pass */)">
    click
</v-ons-button>

any idea on how to acheive something like this ?

The real problem comes from adding Auth to ons-navigator

[Fran Diox]

@darkylmnx Can’t you extend the component and pass custom data as mentioned here? It will be merged with the original data property.

[darkylmnx]

well i saw this but it seems quite unmaintainable and weird as it’s creating new component each time and also weird part is that any time i want to push a stack from another component i need to import the component i want to push which i found quite weird

[darkylmnx]

@Fran-Diox said:

@darkylmnx Can’t you extend the component and pass custom data as mentioned here? It will be merged with the original data property.

and what about the auth guard (navigation guard issue) ?

[Fran Diox]

@darkylmnx v-ons-navigator is not related to Vue router so don’t expect it to have the same API or built-in features. If you want auth you can check if the user is logged in before pushing the actual page component, it shouldn’t be very hard.

Otherwise, you can still use Vue router with or without v-ons-navigator. If you want to use them both, have a look at this code (preview here).