How do we make cards clickable to navigate to another page?

How do we make cards component clickable to navigate to another page in Vue.js?

Want behavior as follows:

Page A has a card with image and text.
Page B has the details of of the card that was clicked on from Page A

Page A -> Page B

Is there some sort of push method? Or am I supposed to wrap the card with a f7-link? This doesn’t seem like a smart idea as f7-link will distort the entire card.

Something like

<f7-card @click.native=“$f7router.navigate(‘/some-page/’)”>...
1 Like

Where do we access $f7router? It isn’t able to find it apparently


this.$f7router.navigate('newsDetails/')
1 Like