Vue-router: Add Per-Route beforeLeave and beforeUpdate guard

[miljan-aleksic]

Is there any reason why this guard is not supported on per route configuration? While there is component beforeRouteLeave hook.

[posva]

I remember it is because it has access to this and therefore makes more sense to be declared at a component level

[miljan-aleksic]

Not really needing it, but make sense to have both, if for example want to and can afford to keep the route logic out of the component one.

[posva]

Adding a note from #1577 :
beforeEnter on routes allows you to have generic guards that do not depend on the component while component guards are specific to that component.

[mitar]

I really think this is needed to handle cases when one uses props set to true on the route to pass route to the component as props. Then you do not want component to handle invalid values being passed, but you want and need route to check that every time props change, to decide if to pass the new prop value to the component or do something else.

[econic]

And something else could also be dispatching a store action necessary to get the component's data

[patricio-ezequiel-hondagneu-roig]

This would be a nice feature to have, and it would also make it feel more consistent with component guards.

[mjarosch]

I could really use a beforeUpdate to validate params before passing them to the component. I took a stab at adding them in. This is my first time working with the vue-router code, so I am probably missing things. Any chance this could be pulled in as a feature?

Commit

[MaheshCasiraghi]

I solved this by adding per-route guards as meta fields.
In (all) routes:

        beforeEnter (to, from, next) {
            console.log("Entering route (only called once)");
            // next();
        },
        meta: { 
            beforeUpdate (to, from, next) {
                console.log("updating route");
                // next();
            },
            afterLeave (to, from) {
                console.log("leaving route");
            },
        },

In router (only once):

    router.beforeEach((to, from, next) => {
        to.meta.beforeUpdate(to, from, next);
    })

    router.afterEach((to, from) => {
        to.meta.afterLeave(to, from);
    })

[Rziedreo145]

@MaheshCasiraghi I was pretty excited about your simple workaround, but found that it doesn't support guards on parent routes. I'm going to take a crack at extending your work around to that end.