title: How remove active class from router-link when :to property get false value?
body: <p>I use <code>router-link</code> in vue for menu.
  I want make the link be enabled when the <code>routeName</code> is <code>specificName1</code> or <code>specificName2</code>.
  I use a if clause in <code>:to</code> property and make links diabled and enabeld.
  But when <code>:to</code> property is false, however is disabled, but has the active class.
  How can I make it be disabled but with disabled class?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('customIcon', {
    template: `&lt;svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355"&gt;
          &lt;path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/&gt;
      &lt;/svg&gt;`
  })
  
  new Vue({
    el: "#app",
    data() {
      return {
        routeName: 'specificName1',
        menu: [
        {to: 'link1', name: 'name1'},
        {to: 'link2', name: 'name2'},
        {to: 'link3', name: 'name3'}
        ]
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /&gt;
  
  &lt;script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="app"&gt;
    &lt;div&gt;
    &lt;ul&gt;
      &lt;router-link
        v-for="{ to, name } in menu"
        v-slot="{ href, navigate, isActive, isExactActive }"
        :key="name"
        :to="(routeName === 'specificName1' || routeName === 'specificName2') &amp;&amp; to"
      &gt;
        &lt;li :class="['nav-item', isActive &amp;&amp; 'active', isExactActive &amp;&amp; 'exact-active']"&gt;
          &lt;a
            v-t="name"
            :href="href"
            @click="navigate"
          /&gt;
        &lt;/li&gt;
      &lt;/router-link&gt;
    &lt;/ul&gt;  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>