Vue-router: Add beforeUpdate to route config

[Mighty683]

What problem does this feature solve?

Since for now we can't handle lazy loading components without losing access to navigation hooks build in components we should give equal API on router config level.
For now we can only add beforeEnter route guard. It would be usefull if we had beforeUpdate guard too.

Problem with lazy loading components described here:
https://github.com/vuejs/vue-router/issues/2830

What does the proposed API look like?

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeUpdate: (to, from, next) => {
        // ...
      }
    }
  ]
})

[posva]

Thanks for the proposal but regarding hooking into navigation cycle to show loading experience, this won't add anything to hook on. beforeRouteUpdate is specific to components because we are on the component and have access to this. You can already write the guard somewhere and pass it to the component by importing it:

import { checkIdAccess } from '@/guards'

export default {
  beforeRouteEnter: checkIdAccess,
  beforeRouteUpdate: checkIdAccess,
}

Since for now we can't handle lazy loading components without losing access to navigation hooks build in components we should give equal API on router config level.

This is untrue and we already talked about it in #2830 ...

[Mighty683]

It's impossible to handle displaying loading on fetching of lazy loaded component and guard for route update for now.

[Mighty683]

My case is:

On route update I need to change seo related things outside component eg: canonical link or meta. And this changes are related only to several routes.

If I lazyload component and want display loading during fetching of it I lose feature of beforeRouteUpdate inside such component.

I can add router.beforeEach and check what route is navigated now but it's hack and will produce large if/switch... code block. I think for such task I should use beforeRouteUpdate but since I lazyload component with loading indicator before it's apperance I can't use it.

I think for such tasks beforeUpdate hook on router would be usefull.

[Mighty683]

Beside lazy loading why we need component to simply guard route update? Now we can guard enter to path without using component to do this job why not update?

[bachy]

Hello,
+1, why not ?

[SirLamer]

I agree, there are applications where we don't need the component for a refresh case necessarily. I have a case where I wish to fetch the ID number for a given URL slug via an API query and I don't need the component for that. Because of client-side caching in my case, it's very efficient to just keep firing the same API query on each route change - the query cache will return the result instead of querying the server - but the current implementation does not allow this. I'd be with the in-router version of "onUpdate" to not have component access.