如何hide/unhide vuejs中特定组件的router-link按钮

Question

我正在使用 router-link 作为在不同组件之间导航的按钮。 有什么方法可以隐藏特定组件的组件。

<router-link :to="{path: prevPage }" tag="button" class="btn btn-primary">

Answer 1

您可以通过两种方式获取当前路由的路径

v-if="$route.path != '/'"

或

v-if="$router.currentRoute.path != '/'"

它们都是 returns 一个等于当前路由路径的字符串，始终解析为绝对路径。

您可以查看文档： https://router.vuejs.org/api/#route-object-properties

你可以检查这个fiddle：https://jsfiddle.net/Farouk_Mekkaoui/7xvpje08/12/

Answer 2

上面的答案帮助我完成了大部分工作，但使用命名路由对我来说效果更好的是：

v-if="$router.currentRoute.name != 'routeNameHere'"