如何在 vue.js 中突出显示用户当前所在页面的链接？答案

【问题标题】：How to highlight link to a page that the user is currently on in vue.js?如何在 vue.js 中突出显示用户当前所在页面的链接？
【发布时间】：2021-05-09 21:01:07
【问题描述】：

我有一个带有多个链接的侧边栏（所有链接都由用户动态生成 - 类似于创建笔记然后有指向这些笔记的链接）：

“添加舞台”按钮允许他们添加新笔记。

用于生成此列表的组件是一个 v-navigation-drawer：

    <v-navigation-drawer>
        <v-expansion-panels>
            <v-expansion-panel>
                <v-expansion-panel-content>
                    <v-list 
                        v-for="(note, i) in notes"
                        :key="i"
                    >
                        <v-card flat @click="getNoteURL(note)">
                            <div class="d-flex pt-2" v-else>
                                <v-icon>
                                    {{ note.mdi_name }}
                                </v-icon>
                                <p>{{ note.name }}</p>
                            </div>
                        </v-card>
                    </v-list>
                </v-expansion-panel-content>
            </v-expansion-panel>
        </v-expansion-panels>
    </v-navigation-drawer>

getNoteURL 是一种将用户带到 url 所在的方法 .../notes/5

    getNoteURL(note) {
        window.location.href = window.routes['notes.show'].replace('{note}', note.id);
    },

我如何能够突出显示特定链接，以便无论用户在哪个页面上，链接的颜色都会变暗？比如像这样：

【问题讨论】：

您应该使用vue-router，因此使用vue-link 将允许您的SPA 移动到特定路径。如果侧边栏中的链接与侧边栏的链接路径匹配，它们将自己突出显示，或者至少有一个特定的类与它们相关联。它将是此类：router.vuejs.org/api/#exact-path-active-class PS：window.location 不是 SPA 中的解决方案。

标签： javascript vue.js routes vue-component vuetify.js

【解决方案1】：

您可以使用<router-link> 并在您所在的每条路线上设置活动课程。像这样：

<router-link
  v-for="(note, i) in notes"
  :key="i"
  :to="note"
  :active-class="customActive"
>
  {{ note }}
</router-link>

并为活动路由创建.customActive 类

【讨论】：