title: Make the first child route as the active class whenever the sub-route path is an empty path
body: <p>I have a Main Navigation nav bar with some links. In the home page, i.e., in the root path ('/'), I have nested (child) routes.</p>
  
  <p>Route configration:</p>
  
  <pre><code>const routes = [
      {path: '/', component: HomeMainContent, children: [
              {path: '', component: MovieList},
              {path: 'in-theaters', component: MovieList},
              {path: 'coming-soon', component: ComingSoonList},
              {path: 'trailers', component: TrailerList},
      ]},
      {path: '/about', component: About},
      {path: '/contact',component: Contact},
  ];
  </code></pre>
  
  <p>So when the root path <code>('/')</code> is active, its child router root path <code>('')</code> is activated. </p>
  
  <p>The template of child component router is in this way:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="homeSubMenuWrapper"&gt;
          &lt;ul id="subMenuList"&gt;
              &lt;li v-for="menu in menuList"&gt;
                  &lt;router-link class="menuItem" :to="menu.path"&gt;{{menu.name}}&lt;/router-link&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  menuList: [
                      {name: 'IN THEATER', path: '/in-theaters'},
                      {name: 'COMING SOON', path: '/coming-soon'},
                      {name: 'TRAILERS', path: '/trailers'},
                  ]
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Since, both the path <code>('')</code> and (<code>'in-theaters')</code> have the same component, I would like to make the router-link of path <code>('in-theaters')</code> to have the class of <code>router-link-active</code> whenever the child path <code>('')</code> of its parent path <code>('/')</code> is active. How can I do that?</p>
  
  <p>Meaning the first child route <code>('in-theaters')</code> should have the active class whenever the sub-route path is an empty path <code>('')</code>.</p>