Vue3中尝试用refs替代getElementByID失败，寻求解决方法

你的代码存在几个关键问题，导致refs无法正常工作：

核心问题分析 #

• 混用Composition API与Options API：你在setup()里用了Composition API的ref，但同时保留了Options API的methods和created钩子，两者的变量作用域不互通，this.navOpt根本取不到setup里声明的ref变量。
• setup里错误使用this.$refs：在Composition API的setup函数中，不能用this，模板里的ref会自动绑定到setup中声明的同名ref变量，不需要手动赋值this.$refs。
• created钩子执行时机不对：created钩子在DOM还没挂载时就触发了，此时refs还没关联到实际DOM元素，调用checkActiveRoute会直接报错。
• ref变量访问方式错误：在脚本中访问Composition API的ref变量时，必须通过.value获取实际DOM元素，模板里才可以直接用变量名。

修正后的完整代码 #

<router-link to="/" ref="navOpt">
    <div ref="activeOpt">首页</div>
</router-link>

import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";

export default {
  setup() {
    const navOpt = ref(null);
    const activeOpt = ref(null);
    const route = useRoute();

    // 检查路由激活状态的函数
    const checkActiveRoute = () => {
      // 先判断元素是否存在，避免报错
      if (navOpt.value && navOpt.value.classList.contains("router-link-active")) {
        activeOpt.value?.classList.remove("hide-active");
      } else {
        // 路由切换后恢复隐藏状态
        activeOpt.value?.classList.add("hide-active");
      }
    };

    // DOM挂载完成后第一次执行检查
    onMounted(() => {
      checkActiveRoute();
    });

    // 监听路由变化，每次路由切换都重新检查状态
    watch(
      () => route.path,
      () => {
        checkActiveRoute();
      }
    );

    return { navOpt, activeOpt };
  }
};

关键说明 #

1. 用useRoute监听路由：router-link的router-link-active类随路由变化动态切换，监听路由能保证状态实时更新。
2. 可选链操作符?.：避免元素未挂载时的报错，提升代码健壮性。
3. 统一使用Composition API：把所有逻辑放在setup内，彻底避免API混用带来的作用域问题。

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