How to make active class only on one menu item?

Question

Vue.js

There is this code:

<template>
   <ul class="sidenav app-sidenav open">
      <li v-for="link in links" :key="link.url">
         <router-link
            :to="link.url"
            class="waves-effect waves-orange pointer"
         >
            {{ link.title }}
         </router-link>
      </li>
   </ul>
</template>

<script>
export default {
   data: () => ({
      links: [
         { title: "Счет", url: "/" },
         { title: "История", url: "/history" },
         { title: "Планирование", url: "/planning" },
         { title: "Новая запись", url: "/record" },
         { title: "Категории", url: "/categories" },
      ],
   }),
};
</script>

It is necessary that only one menu item is assigned the class active and other items do not have it.
help me please

Answer 1

Such a class already exists . If you need to style the link - use it .
UPD. Taken from the comments:

Is there a way to assign your own class?

Somehow you can :

computed: {
  activeLink() {
    return this.links.find(n => n.url === this.$route.path);
  },
},

:class="{ active: activeLink === link }"
One thing is not clear - why?