.router-link-active 在 vue css 中不起作用

Posted 2023-02-23

【中文标题】.router-link-active 在 vue css 中不起作用

【英文标题】：.router-link-active not working in vue css

【发布时间】：2019-12-06 02:55:49

【问题描述】：

我有一个看起来或多或少像这样的 Vue 元素

<template>
    <header>
        <nav>
            <router-link to="/somewhere">Test123</router-link>
        </nav>
    </header>
</template>

<style scoped>
    nav .router-link-active 
        color: white;
    
</style>

但它不会使路由器链接 (a) 变为白色。我试过查看 chrome 检查器，但没有显示它具有 .router-link-active 类。我该如何解决这个问题？为什么会这样？

【问题讨论】：

你能提供router 配置对象吗？

【参考方案1】：

Scoped 属性使样式受到约束。样式仅应用于您的组件，它不会泄漏到子组件中。

基本上，作用域使 (nomen omen) SS 而不是 CSS。只是样式表，没有级联。

您可以从样式声明中删除范围，也可以为（比如说）整个应用的所有活动路由器链接定义一些通用***样式。