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

Questions
1

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>

      <app-footer></app-footer>

    </f7-toolbar>

  </f7-view>

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

2

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) {
    console.log(newRoute);
    // set some state here based on new route
  }
},
3

Thanks! It worked like a library