VueJS导航栏激活指示器首次加载不显示问题求助

问题描述 #

导航栏的蓝色下划线指示器功能正常，但首次打开页面或刷新时，指示器不显示，控制台报错Active link not found.。推测原因是mounted事件触发时路由尚未完全加载，导致无法匹配到当前激活的链接。

组件代码 #

<template>
  <nav>
    <RouterLink to="/"><img :src="logo" alt="Logo" /></RouterLink>
    <div class="navigationwrapper">
      <ul class="links" @mouseleave="fixIndicator">
        <li v-for="({ route, name, routeName }, index) in navLinks" @mouseenter="moveIndicator" :route-name="routeName" ref="navigationLinks">
          <RouterLink :to="route">{{ name }}</RouterLink>
        </li>
      </ul>
      <span id="indicator"></span>
    </div>
  </nav>
</template>
<script>
import { animate } from "motion";
import { RouterLink } from "vue-router";
import logo from "../assets/img/logo.png";

export default {
  name: "Navbar",
  data() {
    return {
      logo: logo,
      navLinks: [
        {
          route: "/",
          routeName: "home",
          name: "Home",
        },
        {
          route: "/about",
          routeName: "about",
          name: "About",
        },
        {
          route: "/team",
          routeName: "team",
          name: "Team",
        },
        {
          route: "/demo",
          routeName: "demo",
          name: "Demo",
        },
      ],
    };
  },
  methods: {
    moveIndicator(e) {
      console.log(this.activeLink());
      const node = e.target;
      const nodeLeft = node.offsetLeft;
      const nodeWidth = node.offsetWidth;
      animate("#indicator", { width: `${nodeWidth}px`, left: `${nodeLeft}px` }, { duration: 0.2, easing: "ease-in-out" });
    },
    fixIndicator() {
      const node = this.activeLink();
      if (node == null) {
        console.error("Active link not found.");
        return;
      }
      const nodeLeft = node.offsetLeft;
      const nodeWidth = node.offsetWidth;
      animate("#indicator", { width: `${nodeWidth}px`, left: `${nodeLeft}px` }, { duration: 0.2, easing: "ease-in-out" });
    },
    activeLink() {
      return this.$refs.navigationLinks.find((link) => {
        return link.getAttribute("route-name") == this.$route.name;
      });
    },
  },
  mounted() {
    this.fixIndicator();
  },
};
</script>

解决方案 #

1. 等待路由初始化完成再调用指示器方法 #

修改mounted钩子为异步函数，通过$router.isReady()等待路由完全解析：

async mounted() {
  await this.$router.isReady();
  this.fixIndicator();
},

$router.isReady()会确保初始路由已经加载完成，此时this.$route.name能正确获取，避免找不到激活链接的问题。

2. 监听路由变化，确保切换时指示器更新 #

添加watch监听路由变化，每次路由切换后重新定位指示器：

watch: {
  '$route'() {
    this.fixIndicator();
  }
},

3. 优化activeLink方法（可选） #

避免直接操作DOM属性，通过数据对比找到对应的激活链接元素：

activeLink() {
  const activeItem = this.navLinks.find(item => item.routeName === this.$route.name);
  if (!activeItem) return null;
  const activeIndex = this.navLinks.indexOf(activeItem);
  return this.$refs.navigationLinks?.[activeIndex] || null;
},

这种方式更符合Vue的数据驱动思想，减少DOM操作带来的潜在问题。

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