title: Vue router-link active-class when some child route duplicates the parent
body: <p>I have a routing structure such as:</p>
  <pre><code>{
    path: '/post/'
    component: Post,
    children: [
      {
        path: '/',
        component: Text,
      },
      {
        path: 'text/',
        component: Text,
      },
      {
        path: 'video/',
        component: Video,
      },
    ],
  }
  </code></pre>
  <blockquote>
  <p>The important thing is that the route <code>/post/text/</code> is just an &quot;alias&quot; to the <code>/post/</code> (root point in this case). Also the router configuration has the custom <code>linkActiveClass</code> option such as <em>'act'</em> with some defined styles.</p>
  </blockquote>
  <p>In the parent template I have the kind of tabs with <code>router-link</code>'s:</p>
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;router-link to=&quot;/post/text/&quot;&gt;Text&lt;/router-link&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;router-link to=&quot;/post/video/&quot;&gt;Video&lt;/router-link&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>So the question is:</strong> when going to the <code>/post/</code> route it would be nice the <strong>Text</strong> tab to be marked as &quot;active&quot; with that <em>'act'</em> class because it's just a duplicate of the <code>/post/text/</code> (or vice versa).</p>
  <p>I haven't found any mention of this in the <code>Vue Router</code> docs. How such problems are solved competently?</p>
  <p><em>Thanks in advance!</em></p>
  <hr />
  <h2>Solution (TL;DR - currently unsupported, fixed in v4)</h2>
  <p>The easiest way to achieve this - to use route <code>alias</code> prop, like:</p>
  <pre><code>{
    path: 'text/',
    component: Text,
    alias: '/',
  },
  </code></pre>
  <p>But, unfortunately, <code>active-class</code> doesn't work properly with aliases yet. <a href="https://github.com/vuejs/vue-router/issues/419" rel="nofollow noreferrer">It has been fixed in Vue Router v4</a>.</p>