How to display loading indicator when navigating between routes

1

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.
        NProgress.start()
      }
      next()
     });

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

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

Your help is appreciated. Cheers!!!