What is the difference between <router-link> and $router.push?

Question

<router-link> in my opinion takes more work to implement, since you can add $router.push to any element with an @click event.

What are the pros and cons of each approach? Is there any instance, where <router-link> can not be replaced by $router.push?

Answer 1

First of all is a tag like a tag in HTML so you can not use it inside your script tags. You can only use it inside tags. You have to give to attribute to router-link and you do not need to use click etc.

However, for bigger projects sometimes you need to redirect to another page after you submit a form, or anywhere you like to use redirection in your js. That's why there is $router.push, the $router object is vue-router object so you have all functions that vue-router serves you.