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

【问题标题】：how to conditionally style links in Nuxt/Vue如何有条件地在 Nuxt/Vue 中设置链接样式
【发布时间】：2021-06-19 13:18:47
【问题描述】：

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

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

这是我到目前为止所得到的，它确实会根据页面改变样式，但它对所有链接都这样做，我只希望它在 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>

illustration of what I'm trying to do

【问题讨论】：

标签： html css vue.js nuxt.js

【解决方案1】：

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

例如，在layouts/default.vue:

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

【讨论】：

感谢您回复我——就当前页面链接的样式而言，它仍然有效，但它仍然在每个页面上以相同的方式设置它。我编辑了我的问题以包含我正在尝试做的事情的图片。

【解决方案2】：

我想出了一个解决方案——不确定它是否是最好的方法，但它确实有效。现在每个链接前面都有一个div，它只会在相应的页面上呈现，否则会呈现一个链接。

<template>
  <nav class="flex-container flex-column mt-1">
    <div v-if="currentPageName === 'about'" class="box about">
      <h2>about</h2>
    </div>
    <div v-else>
      <NuxtLink to="/about" class="link">about</NuxtLink>
    </div>
    <div v-if="currentPageName === 'projects'" class="box projects">
      <h2>projects</h2>
    </div>
    <div v-else>
      <NuxtLink to="/projects" class="link">projects</NuxtLink>
    </div>
    <div v-if="currentPageName === 'contact'" class="box contact">
      <h2>contact</h2>
    </div>
    <div v-else>
      <NuxtLink to="/contact" class="link">contact</NuxtLink>
    </div>
  </nav>
</template>

<script>
export default {
  computed: {
    currentPageName() {
      return this.$route.name
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 150px;
  height: 150px;
}

.about {
  background-color: $near-white;
}

.projects {
  background-color: $blue;
}

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

【讨论】：

【解决方案3】：

我认为检查路径是否处于活动状态的最简单方法是 $nuxt.$route.path。

<template>
    <ul>
        <li>
          <nuxt-link :to="links[0].path" :class="{'bg-black text-white': links[0].path == path }">{{ links[0].name }}</nuxt-link>
          <nuxt-link :to="links[1].path" :class="{secondStyle: links[1].path == path }">{{ links[1].name }}</nuxt-link>
        </li>
    </ul>
</template>
    
<script>
    export default {
        name: "Header",
        data() {
          return {
            path: null,
            links: [
              {path: "/link1", name: "Link 1"},
              {path: "/link2", name: "Link 2"}
            ],
          };
        },
        mounted() {
          this.path = $nuxt.$route.path;
        },
    };
</script>

【讨论】：