Nuxt 3 useHead 优雅地替换 body class，告别累积烦恼

在 Nuxt 3 中使用 useHead 替换 body class

引言

在 Nuxt 3 项目中，我们经常需要在路由变化时动态调整 body class。本文将探讨如何使用 useHead 钩子来实现这一目标，同时避免将其添加到现有的 body class 中。

问题：累积的 body class

使用 useHead 设置 body class 时，一个常见的问题是新设置的 class 会被添加到现有的 body class 中。这会导致 body class 累积，产生不必要的样式和冲突。

解决方案：useHead 的第二种形式

要替换 body class，我们可以使用 useHead 的第二种形式，如下所示：

useHead({
  bodyAttrs: {
    class: `page--${data.bodyClass}`,
  },
  bodyClass: '',
});

此处的 bodyAttrs.class 用于指定新 body class，而 bodyClass 用于清除现有 body class。这样，旧的 body class 将被新设置的 class 替换。

示例：动态更新 body class

import { useHead } from 'nuxt/app';
import { ref, watch } from 'vue';

export default {
  setup() {
    const bodyClass = ref('page--home');

    watch(bodyClass, (newClass) => {
      useHead({
        bodyAttrs: {
          class: newClass,
        },
        bodyClass: '',
      });
    });

    return {
      bodyClass,
    };
  },
};

在这个示例中，我们使用 Vue 的 ref 和 watch API 来响应 bodyClass 的更改。每当 bodyClass 发生更改时，它都会触发 useHead 调用，并更新 body class。

优点

这种方法的主要优点包括：

• 替换而非添加： 它确保 body class 被替换，而不是添加到现有 class 中。
• 响应式： 它使用 Vue 的响应式系统，允许在数据更改时自动更新 body class。
• SSR 友好： 它可以在 SSR 和客户端渲染应用程序中使用。

结论

通过使用 useHead 的第二种形式，我们可以有效地替换 Nuxt 3 中的 body class。这种方法是响应式的、SSR 友好的，并确保了新设置的 body class 不会被添加到现有 class 中。

常见问题解答

1. 为什么我的 body class 累积了？
   这是因为 useHead 的默认行为是将新设置的 class 添加到现有的 body class 中。要替换 body class，我们需要使用 useHead 的第二种形式。

2. 如何使用 Vue 的 watch API 更新 body class？
   watch(bodyClass, (newClass) => { ... }); 会监听 bodyClass 的更改，并在发生更改时触发回调函数。

3. 此方法在 SSR 中工作吗？
   是的，此方法可以在 SSR 和客户端渲染应用程序中使用。

4. 我可以使用 useHead 设置其他 body 属性吗？
   是的，useHead 允许你设置其他 body 属性，例如 id、style 和 data-* 属性。

5. 是否可以使用 useHead 移除 body class？
   是的，可以通过将 bodyClass 设置为空字符串来使用 useHead 移除 body class。