<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?

CodePudding user response：

While router-link's handler does the same $router.push(), it also performs under the hood a handful of useful actions that you will have to implement by yourself to assure the navigation works as expected in every scenario. For example, it activates a "navigation guard" to check for the validity of the triggering event, catches any navigation errors, also, it is the implementation of active route detection and styling which may be a pain to implement in complex navigations (for ex. multilevel navigation menus) that is also simplified by the router-link implementation. These are some of the pros that I could spot at a first glance at its source code. You can look at it for a more in depth comparison here

CodePudding user response：

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.