Vue-router: Ability to execute code "really" `afterEach`

Created on 25 Nov 2015  路  5Comments  路  Source: vuejs/vue-router

I might be totally missing something here, but it seems like in the following setup, there's no (good) way to "really" find out when each transition has completed (for instance, to have global loading indicators).

var Ajaxy = Vue.extend({
    template: '<div>Some ajaxy things happen in here, supposedly.</div>',
    route: {
        activate: function(transition) {
            return this.$http.get 'a-page', function(res) {
                this.data = res;
            }
        }
    }
});

var router = new VueRouter();

router.map({
    '': {
        component: Foo
    },
    'ajaxy': {
        component: Ajaxy
    }
});

router.beforeEach(function(transition) {
    router.app.loading = true;
    transition.next();
});

router.afterEach(function() {
    // this fires before the component's route `activate` is resolved'
    router.app.loading = false;
});

I understand this is the currently expected behavior, but it would be super useful to be able to have a "true" after. I just had a really quick look, but if I'm not mistaken, it should be relatively easy to drop something into _postTransition that works basically the same as when the _afterEachHooks are called in _onTransitionValidated. This could possibly be exposed as postEach? I'd be happy to take care of this and submit a PR, or however you want it handled!

1.x feature request

Most helpful comment

I believe this is still a problem in Vue 2 and VueRouter.

All 5 comments

Question: I'd like to scroll window to the top, and i think i should do this after my data hook is resolved because my page shows a large number of data. But i don't know how to do. :joy:
Is my question similar to this issue? :confused:

1+

I also would like to have global loading indicators inside my app (dynamically apply the class "loading" to the body, for example). As far as I know, there is no good way of passing the value of $loadingRouteData from a loading component to the root.

EDIT: Nevermind. It's clear vue-router will be updated for Vue 2 and the transition API is being changed.

I believe this is still a problem in Vue 2 and VueRouter.

Was this page helpful?
0 / 5 - 0 ratings