如何在 Buefy 中使用 nuxt-link 标签？

Posted 2023-02-22

【中文标题】如何在 Buefy 中使用 nuxt-link 标签？

【英文标题】：How to use nuxt-link tag in Buefy?

【发布时间】：2019-12-12 23:18:27

【问题描述】：

在 Buefy navBar 组件中的 item 元素有

<b-navbar-item href="/job">
            job
</b-navbar-item>

它呈现标准的a html 标记。单击时，页面重新加载。我想在不重新加载页面的情况下使用nuxt-link Nuxt 标签。

此代码有效，但我的 css 设计 Bulma 导航栏坏了。

<b-navbar-item >
    <nuxt-link to="/job">
        Job
    </nuxt-link>
</b-navbar-item>

【参考方案1】：

两种方式：

不要使用 buefy 导航栏，只使用类：

<nuxt-link to="/job" class="navbar-item">
    Job
</nuxt-link>

使用tag:

<b-navbar-item tag="nuxt-link" to="/job">
    job
</b-navbar-item>

见https://buefy.org/documentation/navbar#api-view

【讨论】：

哪一个更好？还是什么？

没有一个比另一个更好。这是一个偏好问题。如果您需要 buefy navbar 的功能，请使用它。这个组件写得很好。如果您不需要一些功能，您可以使用自己的实现...