Nuxt.js中如何在首页完全加载后再应用导航栏透明样式？

方法一：通过页面加载状态控制样式应用 #

核心思路是先让导航栏保持默认样式，等首页完全加载完成后再切换到透明样式，避免加载前的样式突变。

1. 在组件的data中添加状态变量，初始为未加载状态：

data() {
  return {
    isHomeLoaded: false
  }
},

2. 修改v-img的样式绑定，结合首页判断与加载状态：

<nuxt-link aria-label="home-page" to="/" class="d-flex">
  <v-img
    :src="require('~/assets/images/example.svg')"
    max-height="55px"
    max-width="110px"
    class="mb-1"
    :class="{ 'transparency': homePage && isHomeLoaded }"
    contain
  ></v-img>
</nuxt-link>

3. 在mounted钩子中监听页面加载完成事件，更新状态：

mounted() {
  if (this.$route.path === '/') {
    // 监听window的load事件，确保所有资源（图片、样式等）加载完成
    const setLoadedState = () => {
      this.isHomeLoaded = true
    }
    window.addEventListener('load', setLoadedState)
    
    // 处理页面已提前加载完成的情况
    if (document.readyState === 'complete') {
      setLoadedState()
    }

    // 离开页面时移除监听，避免内存泄漏
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('load', setLoadedState)
    })
  }
},

方法二：结合Nuxt页面生命周期事件 #

如果导航栏放在Nuxt的布局组件（layouts）中，可以利用Nuxt内置的page:finish事件，该事件会在页面完全加载完成后触发：

1. 在布局组件的data中添加状态变量，再监听事件：

data() {
  return {
    isHomeLoaded: false
  }
},
mounted() {
  this.$nuxt.$on('page:finish', () => {
    this.isHomeLoaded = this.$route.path === '/'
  })
}

额外优化：添加过渡动画 #

给透明样式添加过渡效果，让样式切换更平滑，进一步弱化视觉感知：

.v-img {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.v-img.transparency {
  opacity: 0; /* 对应你的透明样式逻辑 */
}

内容的提问来源于stack exchange，提问作者Kos-Mos