Vue.js / Nuxt.js |在滚动上切换href标签颜色

Question

在此先感谢您阅读此内容！要点：

假设我在 index.vue 文件中拥有此文件

<template>
  <container>
    <BaseNav/>
    <MainSection/>
    <AboutUsSection/>
    <OurWorkSection/>
    <ClustersSection/>
    <RulesSection/>
    <TeamSection/>
    <NewsSection/>
    <ContactSection/>
  </container>
</template>

在顶部，我有<BaseNav/>-这是我的导航(nav>ul>li).导航是在视口顶部的position: fixed。

下面的每个组件都有其自己的背景，并且导航样式（a href tag的颜色）需要根据当前使用的组件进行更改。

我该如何实现？我是否需要计算视口的高度？没有任何外部库怎么做？