I'm building a Nuxt app and am having trouble with conditional styling. What I'm trying to do is apply a different background color to the active link depending on what page it is. I know I can use `.nuxt-link-exact-active` to style the active link, but I'm stuck on how to make that different on each page.

I have the links in a component that gets rendered on each page. I've tried using `.nuxt-link-exact-active` at the page level, but it doesn't get picked up.

Here's what I've got so far, which does change the styling depending on the page, but it does it for *all* the links, and I only want it on the *active* link. Please let me know if I can clarify anything. Thanks!

```
<template>
  <nav class="flex-container flex-column mt-1">
    <NuxtLink to="/about" class="link" :class="classObject">about</NuxtLink>
    <div class="mt-1 flex-container">
      <NuxtLink to="/projects" class="link" :class="classObject"
        >projects</NuxtLink
      >
    </div>
    <div class="mt-1 flex-container">
      <NuxtLink to="/contact" class="link" :class="classObject"
        >contact</NuxtLink
      >
    </div>
  </nav>
</template>

<script>
export default {
  // apply current route name as a class to the matching div
  computed: {
    classObject() {
      return {
        about: this.$route.name === 'about',
        projects: this.$route.name === 'projects',
        contact: this.$route.name === 'contact',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.about {
  background-color: $near-white;
}

.projects {
  background-color: $blue;
}

.contact {
  background-color: $yellow;
}
</style>

```

[illustration of what I'm trying to do](https://i.stack.imgur.com/wuRZI.png)