vue.js 如何为带参数的链接设置nuxt-link的active-class？

ygya80vv 于 2023-03-24 发布在 Vue.js

关注(0)|答案(4)|浏览(288)

我的代码是这样的。
然而，在这段代码中，当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>

我该怎么补救？
当我删除exact时，它在所有页面上都变成活动类。
谢谢你的回答。
我发现了一种方法来激活时“/”不管参数.这是代码.
x一个一个一个一个x一个一个二个x

vue.js

来源：https://stackoverflow.com/questions/57321482/how-do-i-set-nuxt-links-active-class-for-links-with-parameters

4条答案

按热度按时间

fgw7neuy1#

在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 */
}

希望能有所帮助！

赞(0）回复(0）举报 2023-03-24

wgxvkvu92#

我也有同样的问题。我是这样解决的：

<b-link :class="{'nuxt-link-active': isRouteActive(id) }" :to="id + '?someParams=true'">

方法：

methods: {
    isRouteActive(id) {
      if (this.$route.path.includes(id)) {
        return true
      } else {
        return false
      }
    },
    log() {
      console.log(this.categories)
    }
}

但是，我想知道是否有一种原生的方式来做到这一点...

赞(0）回复(0）举报 2023-03-24

flseospp3#

样式化类.nuxt-link-active并自动工作。
参考：https://nuxtjs.org/examples/routing/active-link-classes/

赞(0）回复(0）举报 2023-03-24

c9x0cxw04#

对于nuxtjs 3，您应该这样配置它;

router: {
    options: {
      linkActiveClass: "active",
      linkExactActiveClass: "exact-active"
    }
  }

赞(0）回复(0）举报 2023-03-24

我来回答

vue.js 如何为带参数的链接设置nuxt-link的active-class？

4条答案

相关问题

热门标签

最新问答