如何根据vue3中的路由器历史记录在我的头中显示和隐藏组件

Question

我想根据我的vue应用程序中当前加载的路由器路径，在web应用程序顶部的导航中显示和隐藏一个按钮。我有一个名为HeaderComponent的组件，它有我的顶级导航。

我还没有找到一个好的方法来绑定vue提供的$router.options.history.location中的更改。

我想做这样的事。

<form class="xs:invisible sm:invisible md:visible" v-show="$router.options.history.location != '/main'">
<button>click me</button>
</form>

Answer 1

您可以改为绑定到$route.path：

<form v-show="$route.path !== '/main'">

您还可以使用其他属性。如果你已经命名了路线，那么一个不依赖于路径的更好方法是：

<form v-show="$route.name !== 'main'">

如果你有嵌套的路线，那么你可能需要改为：

<form v-show="!$route.matched.some(r => r.name === 'main')">

我认为这个API与Vue路由器版本3(即Vue 2(没有变化。