How to display loading indicator when navigating between routes

Hello good people,

I’ve been trying to show loading indicator when traversing from routes to routes in my F7-Vuejs app. I am doing so, to improve the user experience on my app.

I have done with traditional Vue.js beforeResolve and afterEach property inside my routes file as shown below;

const routes = [...// routes here ]

    routes.beforeResolve((to, from, next) => {
      if (to.path) {
        // Start the route progress bar.

    routes.afterEach((to, from) => {
      // Complete the animation of the route progress bar.

But it’s not able to access the methods, can you point me on how to implement this properly.

Your help is appreciated. Cheers!!!