Navbar always sets root page as "active"

The navbar sets active class on the <a> element based on the page the user selected, which is great. Unfortunately if one of my <b-nav-item> components links to root (/), root will always have the active class attached to it as well. Here is the code with which I am experiencing this:

  <header>
    <b-navbar toggleable="md" fixed="top" variant="white">
        <b-navbar-brand to="/"><img src="/static/my-logo.svg" alt="logo"/></b-navbar-brand>
        <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
        <b-collapse is-nav id="nav_collapse" >
          <b-navbar-nav>
            <b-nav-item to="/">Home</b-nav-item>
            <b-nav-item to="/page1">Page1</b-nav-item>
            <b-nav-item to="/page2">Page2</b-nav-item>
            <b-nav-item to="/page3">Page3</b-nav-item>
            <b-nav-item to="/page4">Page4</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
    </b-navbar>
  </header>

If I navigate to /page3, both /page3 and / will have the active class attached to the anchor element.

[emanuelmutschlechner]

You have to set the exact prop:

https://bootstrap-vue.js.org/docs/components/link

[emanuelmutschlechner]

@mikeovc links in BootstrapVue are build upon Vue router links, e.g. the link '/' will be active for every url; '/help' will be active for '/help', '/help/' and '/help/*'.

https://router.vuejs.org/en/api/router-link.html

https://bootstrap-vue.js.org/docs/reference/router-links#common-router-link-props