title: Vue.js: Add router-link-active to vue-router component loaded for root
body: <p>I'm having some trouble with vue-router. My routes are set up like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const routes = [
      { path: '/', component: a },
      { path: '/a', component: a },
      { path: '/b', component: b },
      { path: '/c', component: c }
  ]
  </code></pre>
  
  <p>As you can see, I want to load component <code>a</code> when the page loads. But I don't want the URL to change to <code>/a</code> when the page loads. However I would like to trigger the <code>router-link-active</code>-class on the <code>&lt;router-link&gt;</code> related to the <code>a</code> component, even though I'm still at <code>/</code>.</p>
  
  <p>I've tried with some simple JS like:</p>
  
  <pre class="lang-js prettyprint-override"><code>if(window.location.hash === '#/') {
      var el = document.querySelector('#drawerList').firstElementChild;
      el.className += 'router-link-active';
  }
  </code></pre>
  
  <p>However vue is not removing the class again when I click on the link to <code>/b</code> or <code>/c</code>. Can any of you hint me in the corrent direction?</p>