Nuxt路由切换返回首页后mounted钩子无法选中DOM元素如何解决？

根因分析 #

1. 页面缓存触发：如果你的布局中<NuxtPage>组件开启了keep-alive缓存，首次加载首页时触发mounted可以正常获取已渲染的DOM；跳转其他页面后首页组件不会被销毁，再次返回时不会重新触发mounted，此时的DOM获取逻辑自然无法正常执行。
2. 异步渲染时序问题：如果目标元素依赖接口返回的异步数据通过v-if/v-for渲染，首次加载首页时走服务端渲染逻辑，DOM已经直出到页面，mounted执行时可以直接拿到元素；客户端路由跳转时走纯客户端渲染逻辑，mounted触发早于异步接口返回和DOM渲染，此时元素还未生成，选择器返回null。
3. 过渡动画影响：如果配置了全局页面过渡效果，mounted触发时过渡动画未完成，目标元素还未插入到文档流中，也会导致选择器返回null。

可行解决方案 #

• 针对keep-alive缓存场景：将DOM获取逻辑从mounted迁移到activated生命周期钩子中，该钩子会在每次缓存组件被激活（切回页面）时触发，同时包裹$nextTick确保DOM已完成渲染：

export default {
  activated() {
    this.$nextTick(() => {
      const target = document.querySelector('.你的目标类名')
      // 执行后续逻辑
    })
  }
}

• 针对异步数据渲染场景：在异步数据请求完成后再执行DOM获取逻辑，或者监听异步数据变化触发逻辑：

export default {
  data() {
    return {
      renderData: []
    }
  },
  async mounted() {
    // 等待异步接口返回
    this.renderData = await fetchYourDataApi()
    // 等待DOM更新完成后再获取元素
    this.$nextTick(() => {
      const target = document.querySelector('.你的目标类名')
      // 执行后续逻辑
    })
  }
}

• 更稳妥的通用方案：使用Vue原生ref替代原生DOM选择器，避免选择器命中错误、时序异常等问题：

<template>
  <!-- 给目标元素绑定ref属性 -->
  <div class="target-item" ref="firstTarget">...</div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const target = this.$refs.firstTarget
      console.log(target)
    })
  },
  // 开启keep-alive时新增这个钩子即可
  activated() {
    this.$nextTick(() => {
      const target = this.$refs.firstTarget
      console.log(target)
    })
  }
}
</script>

内容的提问来源于stack exchange，提问作者arash kenji