I have a sidebar, and clicking on any one of the buttons changes the route and loads a new page, which in turn changes the style of the button to active.

I always want to keep the button active according to the route. I am using the router-link-active class for it, and it works well in all the cases except when I type the route manually and load the page, or when the page is initially loaded the first button is supposed to be active, but it is not the case.

sample button:

  <li>
<router-link :to="{ name: 'Test' }">
  <sidebar-button id="Test-logo" :title="Test">
    <icon-test-logo />
  </sidebar-button>
</router-link>

css:

    `.router-link-active {
    button {
        // Active / Open
        &:active,
        &.e-active {
            background-color: #175222;
        }
    }
}`