How to highlight link to a page that the user is currently on in vue.js?

Question

I have a sidebar with several links (all dynamically generated by the user - similar to creating notes and then having a link to those notes):

The 'Add stage' button allows them to add a new note.

The component used to generate this list a 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 is a method which takes the user where the url is.../notes/5

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

How would I be able to highlight the specific links such that whichever page the user is on, the link darkens in colour? For example like so:

Answer 1

you can use <router-link> and set active class on each route are you in. like this:

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

and create .customActive class for active route