时间戳

首页 > 解决方案 > 如何为带参数的链接设置 nuxt-link 的活动类？

vue.js - 如何为带参数的链接设置 nuxt-link 的活动类？

问题描述

我的代码是这样的。
但是，在此代码中，“/”在domain.com/?standalone=true.

<nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span>
</nuxt-link>
<nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span>
</nuxt-link>

我如何解决它？

当我删除确切时，它在所有页面上都变为活动类。

谢谢你的一些答案。

无论参数如何，我都找到了一种在“/”时激活的方法。这是代码。

<nuxt-link
        to="/"
        class="navBotton home"
        :class="{'active': isRouteActive }"
        exact-active-class="active"
      >

computed: {
    isRouteActive: function() {
      if (this.$nuxt.$route.path=="/") {
        return true;
      } else {
        return false;
      }
    }
  }

标签： vue.jsnuxt.js

解决方案

在通常称为 nuxt 的配置文件中nuxt.config.js，有一个名为 router 的对象的属性：

router: {
    linkActiveClass: 'your-custom-active-link',
    linkExactActiveClass: 'your-custom-exact-active-link',
  }

然后在你的CSS中：

.your-custom-active-link {
  /* styles here */
}
.your-custom-exact-active-link {
  /* styles here */
}

希望能帮助到你！

推荐阅读