Router links sometimes lead to wrong pages or don't work

[watchduck]

Version

3.0.1

Reproduction link

http://daggy1c.watchduck.net/nodes/9

Steps to reproduce

Start on page 9, click parent 2, click parent 1. Link does not work.

Start on page 10, click parent 1, click child 2. Link leads to 13 instead of 2.

What is expected?

That the links go to the correct pages.

What is actually happening?

Sometimes these links go to the wrong page or don't work.

---

A detailed description is on Stackoverflow: https://stackoverflow.com/questions/51332783
Full version with console logging: http://daggy1.watchduck.net/nodes/9
Code on GitHub: https://github.com/watchduck/daggy/tree/static-data/front/src

Works without tag="li":
http://daggy1a.watchduck.net/nodes/9
https://github.com/watchduck/daggy/tree/simple-router-links/front/src

[posva]

Please provide a boiled down repro when reporting a bug, that would really make my life easier 😄 The store part + axios + the nodesrelatives component is too much.
I tried to go through your source code but it's too much
It may get fixed by #2286 but I couldn't check enough

[watchduck]

I made a boiled down version with static data. The setTimeout in Node.vue (standing in for fetching the data from the backend) causes the bug (despite the fact that the delay is 0).

[watchduck]

Will you reopen this? Asking for a boiled down version would have been just as effective without closing it, BTW.

[posva]

I gave this a second look, I still think it's too much, it looks more like a post asking for help 😕. I can help you where I can, I saw there are many antipatterns in your code, the most important one is using a watcher + setting a variable instead of a computed property. I would recommend to directly use $route.params.id or to use the option props: true to get a prop id in Nodes.vue. I also noticed you pass a param name in the router-links but it doesn't exist in your route definition. Instead of putting the element a inside of the router-link and setting it's tag to an li you can also nest the router-link inside of the li element.

I'll recommend you to wait till #2286 is merged and released (or test it locally). If it still fails could you move the code to a codesandbox and send me the link?

[watchduck]

Thanks for the hint. I'll give it a try.

[watchduck]

@posva I let this rest for a while, and just tried to look into the antipatterns you mentioned, but these things don't seem wrong to me. The only watcher I have is the one for $route in Node.vue, and that is the usual way to deal with the update problem: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes Are you sure that can be done with computed properties instead? I pass the name in the link, so I can do this.name = to.params.name. The alternative would only be to fetch the name from the server.