Incorrect handling of metadata with navigation

[jazoom]

Say the app.vue parent component at route / has this property:

metaInfo () {
    return {
      title: 'parent title'
    }
}

and a child component at route /child has this property:

 metaInfo() {
    return {
      title: `${this.name}`
    }
 },

When navigating to the child, the title changes correctly. Then when going back, the title stays as the child's title (it should go back to parent title). Then when navigating to the same child component (a different instance), the title flicks to 'undefined' before changing to the new this.name.

What I would expect is that going back from /child to / would change the title back to what it was before the child overrode it. Then I would expect that if this.name is not ready yet when metaInfo is initially called it will leave the current title, rather than changing it to undefined, thus causing the flicker.

[zspecza]

Hi @jazoom - sorry for the late response. Unfortunately I wasn't able to iterate as fast as I planned on this project and have found myself at a loss for free time while I setup my new business entity, but as soon as I've got some more time on my hands I will be working actively on this project again - should be ETA 1-2 weeks from now.

I did get some free time today to reproduce your issue, but haven't been able to. I do think however that after examining my implementation, there is room for aggressive checking for race conditions that might mitigate this issue.

If you could try to reproduce the problem in a small example repo I could look at, that might help tremendously - if it isn't too much of a bother 😌

[jazoom]

Hi, @declandewet, sorry it has taken a while. I've set up this project for you:

https://github.com/jazoom/demonstration

It is the same sort of setup that my app has, but very simplified. It perfectly demonstrates the issue. All you have to do is click one button then watch the title on the browser tab. Then press the browser's back button. Then click the other button.

[jazoom]

It uses vbuild, so to set it up you just need to yarn or npm install then npm run dev.

[zspecza]

Hi @jazoom - I see the issue(s). I'll have a look at fixing them as soon as I can. I think the failure to update the old title comes from your use of router.push, as this bug does not occur when navigating via router-link - still a bug though, so thanks for reporting.

As for undefined - I can do a null check, but would have to maintain a representation of old state which would complicate things a bit and would require some time to implement. In the meantime you can simply set the title to something else - I do this in the vuex-async example: https://github.com/declandewet/vue-meta/blob/master/examples/vuex-async/views/Post.vue#L29

[jazoom]

Isn't it possible to just not change the title (in a setter) if the value provided is falsy?

In that example I provided to you I used router.push(), but actually in my app I use a <router-link> for that purpose, and the bug is still there.