[Vuejs]-Using v-if to use different route-links in header cause route to wrong path

0šŸ‘

I printed loggedIn and it was correct as I mentioned before.

Problem was not that though, Component rendered correctly. Problem was the click event listener I suppose.

Adding unique key to each route-link solved problem.

Most probably vue create an event-listener for each link, and once old links are destroyed and new links are rendered, it creates new listeners for new link but not remove old ones. Since there was no identity in links, it maps according to order.
Once old link is replaced with new one, it has two listener, one for old link that stayed in the same place, one for intended for the link. So it triggers one of them when clicked.
Actually it explains that why it works as intended first, after refresh works wrong, after another refresh again works correctly.

Iā€™m not sure if it is a bug or not, but adding key is the only and true solution as it seems.

Leave a comment