如何仅针对 nuxt 中的特定页面设置 nuxt-link-exact-active 的范围？
我正在创建一个侧面菜单栏，我想突出显示当前活动的页面用户的名称。像这样的事情： 
我已经成功地做到了这一点，但是我定义的样式正在对整个网站的所有链接生效，这导致了很多问题。
如果我应用
我的组件看起来像这样..
Menubar.vue
<template>
<ul class="w-56 border bg-base-100 border-none">
<li class="my-4">
<nuxt-link active-class="current-dash-page" to="./general" class="nav-link p-3">General Information</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./announcements" class="p-3">Announcements</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./learners" class="p-3">Manage Learners</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./schedule" class="p-3">Schedule</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./danger" class="p-3">Danger Zone</nuxt-link>
</li>
</ul>
</template>
<style>
.nuxt-link-exact-active {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: hsla(var(--a) / var(--tw-bg-opacity));
color: white;
}
</style>
I am creating a side menu bar, and I want to highlight name of page user is currently active on. Something like this:
I have successfully managed to do that, but style I defined is taking effect on all the links throughout the website, which is causing a lot of problem.
If I apply <style scoped>, style is not taking effect anywhere. Not even on intended page.
My Component looks something like this..
Menubar.vue
<template>
<ul class="w-56 border bg-base-100 border-none">
<li class="my-4">
<nuxt-link active-class="current-dash-page" to="./general" class="nav-link p-3">General Information</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./announcements" class="p-3">Announcements</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./learners" class="p-3">Manage Learners</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./schedule" class="p-3">Schedule</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./danger" class="p-3">Danger Zone</nuxt-link>
</li>
</ul>
</template>
<style>
.nuxt-link-exact-active {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: hsla(var(--a) / var(--tw-bg-opacity));
color: white;
}
</style>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题可能出在您的 to="" 参数的值上。它们与当前页面相关，因此，例如，如果您导航到“learners”，那么您的 url 将以 .../learners/ 结尾，然后如果您导航到“danger”，您的 url 将更改为 .../learners /danger/ 将会被精确活跃的班级错过。尝试给 to="" 赋予绝对值。
The problem might be with the values of your to="" arguments. They are relative to the current page, so if you navigate to, for example, "learners" then your url will end with .../learners/ then if you navigate to "danger" your url will change to .../learners/danger/ which will be missed by the exact-active class. Try giving absolute values to to="".
您应该使用的 css 类是 router-link-exact-active
The css class you should be using is router-link-exact-active