时间戳

首页 > 解决方案 > 如何有条件地在 Nuxt/Vue 中设置链接样式

html - 如何有条件地在 Nuxt/Vue 中设置链接样式

问题描述

我正在构建一个 Nuxt 应用程序，但在使用条件样式时遇到了问题。我正在尝试做的是根据它是什么页面对活动链接应用不同的背景颜色。我知道我可以用来.nuxt-link-exact-active设置活动链接的样式，但我一直坚持如何在每个页面上做出不同的设置。

我在每个页面上呈现的组件中有链接。我已经尝试.nuxt-link-exact-active在页面级别使用，但它没有被拾取。

这是我到目前为止所得到的，它确实会根据页面改变样式，但它对所有链接都有效，我只希望它在活动链接上。如果我能澄清任何事情，请告诉我。谢谢！

<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>

我正在尝试做的插图

标签： htmlcssvue.jsnuxt.js

解决方案

不要.nuxt-link-exact-active在页面级别进行更改，而是在布局中进行更改。

例如，在layouts/default.vue：

<style>
.nuxt-link-exact-active {
  background: red;
}
</style>

推荐阅读