F7-vue How to react to route changes in toolbar component

Hi! I need to apply a class to my toolbar based on the current path (e.g class toolbar-home for /home/, .toolbar-profile for /profile/)

My common toolbar:

  <f7-view main class="view-main safe-areas" :push-state="true" url="/">

    <f7-toolbar class="footer-toolbar" no-shadow bottom-md>




I tried to return a computed value with this.$f7route.path but it gets no reactivity.

You can add route change event handler in your component https://framework7.io/docs/view.html#router-instance-events, for example in mounted like:

mounted() {
  this.$f7ready(() => {
    this.$f7.on('routeChange', this.onRouteChange)
methods: {
  onRouteChange(newRoute, previousRoute) {
    // set some state here based on new route

Thanks! It worked like a library