How to fix the Vue router link issue

Since I implemented The Vue Router in my application, I found an issue that is wired.

When I hovered my cursor on the button, it cannot be clicked and switch to the route page immediately. There was nothing happened. All I need to do was that I need to place the cursor out of the button, and moved it back again. At this time, the same button might be clickable and switch to the correct page.

I was wondering if it is because some technicals need to be implemented to improve The Vue Router performance. I thought it might be because the app gets the ‘stuId’ for the route link very slow.

However, after searched on the internet for a while, I did not find any solutions. So I have to check my code again.

The solution

This is the snippet of code for the router link:

I found the router-link tag only includes the ‘Profile’ text, not the whole el-button. So, I tried to hover my cursor on the text of the button, I can click the button immediately.

So, the only clickable part is the text of the button. To solve this issue, I changed the button type to ‘text’. It works perfectly!

Originally published at https://williamyuaus.com on June 10, 2021.