v-ons-back-button

Back button component for <v-ons-toolbar>. Put it in the left part of the <v-ons-toolbar>. It will find the parent <v-ons-navigator> component and pop a page when clicked. This behavior can be overriden by specifying the onClick property and calling event.preventDefault in its callback.

Tutorial

Going back

The VOnsBackButton component can be used to display a back button in the navigation bar. By default, this component automatically finds its parent VOnsNavigator component and pops a page when pressed. However, this default behavior can be overriden by running event.preventDefault in a click handler (or using Vue’s .prevent shorthand modifier):

<v-ons-back-button @click.prevent="pageStack.splice(1, pageStack.length - 1)"></v-ons-back-button>

The previous code resets the pageStack to its first page instance instead of popping 1 single page. It assumes pageStack variable exists in the current context.

See also

Name Type Description
modifier String The appearance of the back button. Optional.
Name Description
material Material Design style
Name Description
click Normal click event. Useful to modify the component default action (pop 1 page).
click

Normal click event. Useful to modify the component default action (pop 1 page).

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.