Vuejs 2 - watch route when going from child to parent

Question

I have the following route structure

/event/:id/schedule/:id

What I want is that, when the user goes to a child component/route, some elements of the parent hide. When the user goes back to the parent, those elements should come back.

On the parent component, i've tried watching the $route object, but nothing is triggered. Attaching hooks at mounted/created methods of the parents component, won't work, because the user is still in those routes. I saw something about

watch(){
        $route: {
            console.log('route change');
        }
    }

I also tried this:

route: {

        canReuse: false

    },

It didn't work, and if it didn't, I wouldn't want to use it.

Any other ideas would be really helpful. thanks.

Answer 1

just discovered some route hooks/navigation guards in the vue-router docs.Just used the following for to the parent component.

beforeRouteUpdate (to, from, next) {
        // called when the route that renders this component has changed,
        // but this component is reused in the new route.
        // For example, for a route with dynamic params /foo/:id, when we
        // navigate between /foo/1 and /foo/2, the same Foo component instance
        // will be reused, and this hook will be called when that happens.
        // has access to `this` component instance.
    },

this worked perfectly