<router-link>和$router.push有什么区别？

Question

我认为

<router-link>

需要更多的工作来实现，因为您可以将

$router.push

添加到具有

@click

事件的任何元素。

每种方法的优缺点是什么？有没有什么情况下

<router-link>

不能用

$router.push

代替？

Answer 1

虽然

router-link

的处理程序执行相同的

$router.push()

操作，但它还在后台执行一些有用的操作，您必须自己实施这些操作，以确保导航在每种情况下都能按预期工作。例如，它激活“导航守卫”来检查触发事件的有效性，捕获任何导航错误，此外，它是主动路线检测和样式的实现，这在复杂的导航中实现起来可能很痛苦（例如.多级导航菜单）也通过

router-link

实现进行了简化。 这些是我第一眼看到它的源代码就可以发现的一些优点。您可以在这里

查看更深入的比较

Answer 2

首先，是一个类似于HTML中的标签的标签，因此您不能在脚本标签中使用它。您只能在标签内使用它。您必须将 to 属性赋予 router-link 并且不需要使用单击等。

但是，对于较大的项目，有时您需要在提交表单后重定向到另一个页面，或者您喜欢在 js 中使用重定向的任何地方。这就是为什么有 $router.push，$router 对象是 vue-router 对象，所以你拥有 vue-router 为你服务的所有功能。