如何在 vuejs 中隐藏/取消隐藏特定组件的路由器链接按钮答案

【问题标题】：How to hide/unhide the router-link button for a specific component in vuejs如何在 vuejs 中隐藏/取消隐藏特定组件的路由器链接按钮
【发布时间】：2019-02-12 13:31:51
【问题描述】：

我使用 router-link 作为在不同组件之间导航的按钮。有没有办法隐藏特定组件的组件。

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

【问题讨论】：

您能详细说明一下吗？请。
我正在使用上面的选项卡返回到我页面中的先前组件。我需要将它隐藏在我的索引页面中。这可以理解吗？
您需要隐藏路径本身吗？或者不渲染来自另一个组件的组件？
对于特定组件，我需要该按钮不在我的页面中显示或可见。这可能吗？
明白了。是否有可能包含更多代码？只是为了有更多的背景，看看我能不能帮你

标签： javascript vue.js routing vue-component vue-cli-3

【解决方案1】：

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

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

或

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

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

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

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

【讨论】：

这会隐藏按钮，但不会显示其他组件的按钮。你知道为什么吗？
你的意思是即使路径和'/'不一样你还是看不到？
是的，它隐藏了所有组件的按钮
尝试使用没有 this 或 $router.currentRoute.path 的 $route.path

【解决方案2】：

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

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

【讨论】：