下面的代码应该做的很简单，当用户导航到/blog路径时，布局设置为blog，博客布局有一个不同的标题样式。主页也有一个不同的标题样式，但是对于NuxtLink，页面布局样式不会更新，除非我每次刷新页面。
有两种不同的布局：default.vue

<template>
  <AppHeader />
  <slot />
</template>

<style>
.header-wrapper {
  background: red;
}
</style>

而另一个布局blog.vue

<template>
  <AppHeader />
  <slot />
</template>

<style>
.header-wrapper {
  background: blue;
}
</style>

在pages目录中，有两个页面index.vue

<script setup>
definePageMeta({
  layout: 'default'
})
</script>

<template>
  <div>
    <h1>this is the homepage</h1>
    <NuxtLink to="/blog">Blog</NuxtLink>
  </div>
</template>

blog.vue

<script setup>
definePageMeta({
  layout: 'blog'
})
</script>

<template>
  <div>
    <h1>this is the blog page</h1>
    <NuxtLink to="/">Homepage</NuxtLink>
  </div>
</template>