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

0
votes

I have a routing structure such as:

{
  path: '/post/'
  component: Post,
  children: [
    {
      path: '/',
      component: Text,
    },
    {
      path: 'text/',
      component: Text,
    },
    {
      path: 'video/',
      component: Video,
    },
  ],
}

The important thing is that the route /post/text/ is just an "alias" to the /post/ (root point in this case). Also the router configuration has the custom linkActiveClass option such as 'act' with some defined styles.

In the parent template I have the kind of tabs with router-link's:

<ul>
  <li>
    <router-link to="/post/text/">Text</router-link>
  </li>
  <li>
    <router-link to="/post/video/">Video</router-link>
  </li>
</ul>

So the question is: when going to the /post/ route it would be nice the Text tab to be marked as "active" with that 'act' class because it's just a duplicate of the /post/text/ (or vice versa).

I haven't found any mention of this in the Vue Router docs. How such problems are solved competently?

Thanks in advance!

Solution (TL;DR - currently unsupported, fixed in v4)

The easiest way to achieve this - to use route alias prop, like:

{
  path: 'text/',
  component: Text,
  alias: '/',
},

But, unfortunately, active-class doesn't work properly with aliases yet. It has been fixed in Vue Router v4.

3
vue.jsvue-routerrouterlink

3 Answers

1
votes

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.

1
votes

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>
1
votes

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

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