Skip to content

Ability to execute code "really" afterEach #251

@paulstraw

Description

@paulstraw

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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions