Progress bar not stopping if route is guarded and redirected

[ProfFan]

How to replicate:

const state = {
  items: [
    {
      name: 'Dashboard',
      path: '/dashboard',
      meta: {
        icon: 'fa-tachometer'
      },
      component: lazyLoading('dashboard', true),
      beforeEnter: (to, from, next) => {
        next('/components')
      }
    },
    charts,
    uifeatures,
    components,
    tables
  ]
}

In store/menu/index.js of vue-admin.

The guard works but progress bar keeps running forever.

[luventa]

Hi @ProfFan Issue fixed in nprogress #6 . Need code review by @fundon

But you still need to check current path before redirecting to avoid vue-router issue.

      beforeEnter: (to, from, next) => {
        if (from.path === '/components') {
          next()
        } else {
          next('/components')
        }
      }

[ProfFan]

Great, thanks :)

[ProfFan]

P.S. @luventa Test case:

beforeEnter: (to, from, next) => {
        if (from.path === '/components') {
          next(false)
        } else {
          next('/components')
        }
      }

And the bar does not stop if I navigate to the guarded page when I was in '/components'.

[luventa]

@ProfFan Yes, in that case router stops to call afterEach function. so the progress bar wont stop. If you really need to abort the current navigation, we will need to provide the functionality for stopping progress bar manually.

[ProfFan]

Maybe we should make a abort() function?

[xuzhy]

What about using decorators? Write a decorator function to wrap the push/replace method which is in the VueRouter class, and then inject the nprogress start/end logic around the target.

[luventa]

@xuzhy Yes, that will be an approach. And actually, in previous version, vue-bulma/nprogress exported a function called 'done' to stop itself.