[Vuejs]-Vue router-link active-class when some child route duplicates the parent

You can do something like this

<ul>
  <li :class="[currentPage.includes('/post/text/') ? 'activeClass' : 'no-active-class']">
    <router-link to="/post/text/">Text</router-link>
  </li>
  <li :class="[currentPage.includes('/post/video/') ? 'activeClass' : 'no-active-class']">
    <router-link to="/post/video/">Video</router-link>
  </li>
</ul>

If your header or browser is a single component, you can include all this functionality in each of your links and it should work correctly.

NOTE: The variable with your current path will depend on the type of project and certain settings in it.

Use the Vuex state.
When every pages go to the tab area are mounted, call a setter for currentPage state.
And you can give an active class according to the state value

<li>
  <div :class="{ 'active': currentPage === 'Text'}">
  <router-link to="text">Text</router-link>></div>
</li>
<li>
  <div :class="{ 'active': currentPage === 'Video'}">
  <router-link to="video">Video</router-link>></div>
</li>

using exact-active-class solved a similar problem to yours.

docs: https://router.vuejs.org/api/#exact-active-class