嘿，这个问题我太熟了！在单页应用里路由跳转后，组件的DOM渲染是异步的，直接在组件刚加载时用querySelector肯定抓不到还没生成的元素，给你几个靠谱的解决办法，分不同场景来说：

1. 利用框架生命周期钩子（最推荐） #

这是最贴合前端框架设计思路的方案，不同框架的实现略有不同：

Vue 场景 #

不管是Vue2还是Vue3，组件挂载完成后会触发对应的生命周期钩子，此时DOM已经完全渲染：

• Vue2 选项式API：

mounted() {
  const chartElement = document.querySelector('#charts');
  // 这里放心操作元素就行
}

• Vue3 组合式API：

import { onMounted } from 'vue';

onMounted(() => {
  const chartElement = document.querySelector('#charts');
  // 执行你的业务逻辑
});

React 场景 #

React 中可以用useEffect钩子实现类似效果，空依赖数组会在组件挂载完成后执行一次：

import { useEffect } from 'react';

const ChartsComponent = () => {
  useEffect(() => {
    const chartElement = document.querySelector('#charts');
    if (chartElement) {
      // 操作元素
    }
  }, []);

  return <div id="charts"></div>;
};

更优雅的方式是用useRef直接绑定元素，完全避免querySelector：

import { useRef, useEffect } from 'react';

const ChartsComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // chartRef.current 就是你要操作的DOM元素
    }
  }, []);

  return <div ref={chartRef}></div>;
};

2. 处理动态渲染的元素 #

如果你的图表元素是基于异步数据生成的（比如用v-for/map渲染子元素），即使在挂载钩子中也可能抓不到，这时候需要等待DOM更新完成：

Vue 中用nextTick #

// Vue2
mounted() {
  this.$nextTick(() => {
    const dynamicElement = document.querySelector('#charts .chart-item');
    // 现在能抓到动态生成的元素了
  });
}

// Vue3 组合式API
import { onMounted, nextTick } from 'vue';

onMounted(async () => {
  await nextTick();
  const dynamicElement = document.querySelector('#charts .chart-item');
});

React 中监听数据变化 #

把数据作为useEffect的依赖，等数据加载完成后再操作DOM：

import { useEffect } from 'react';

const ChartsComponent = ({ chartData }) => {
  useEffect(() => {
    // 确保数据已经加载，DOM才会渲染对应的元素
    if (chartData.length > 0) {
      const dynamicElement = document.querySelector('#charts .chart-item');
      // 操作元素
    }
  }, [chartData]); // 监听数据变化

  return (
    <div id="charts">
      {chartData.map(item => <div key={item.id} className="chart-item">{item.name}</div>)}
    </div>
  );
};

3. 原生JS场景（无框架） #

如果是用原生JS实现路由跳转，比如history.pushState，可以用以下两种方式：

方式一：监听路由变化 + 微任务延迟 #

window.addEventListener('popstate', () => {
  // 用setTimeout(0)等待DOM更新完成
  setTimeout(() => {
    const chartElement = document.querySelector('#charts');
    if (chartElement) {
      // 操作元素
    }
  }, 0);
});

方式二：MutationObserver（更可靠） #

用DOM监听工具观察目标元素是否被添加到DOM中：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes) {
      const chartElement = document.querySelector('#charts');
      if (chartElement) {
        // 找到元素后执行逻辑
        observer.disconnect(); // 停止监听，避免重复触发
      }
    }
  });
});

// 监听body下所有DOM变化
observer.observe(document.body, { childList: true, subtree: true });

总结一下：优先用框架的生命周期钩子，这是最规范的做法；动态元素场景结合nextTick或数据监听；原生JS场景推荐用MutationObserver，比延迟更可靠。

内容的提问来源于stack exchange，提问作者John Stone