Vue-router: active-class is not given to named routes if the URL does not include the trailing slash /

[theshem]

Consider the following snippet:

<router-link :to="{name: 'home'}" exact>Home</router-link>
<router-link to="/user">/user (2) </router-link>
<router-link :to="{name: 'user'}">user (named route) (3) </router-link>

<router-view></router-view>

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/user', 
      component: User,
      children: [
        { 
          path: '',
          name: 'user',
          component: UserHome 
        }
      ]
    },
    {
      path: '',
      name: 'home',
      component: Home,
    }
  ]
});

Example here - click on the link (2), then click on the Home and finally click on the link (3).

Notice that the link (2) and link (3) are 'exact' same routes. But they both don't get the active-class at the same time if you click on the link (2).

However the active-class is added to both of them by clicking on the link (3).

That is because of the trailing slash / on the (3) link I guess.

[theshem]

Any update on this?

[LinusBorg]

No, unfortunately.

[morficus]

I have the same issue but a different use case:

I have 2 routes:

const router = new VueRouter({
    mode: 'history', 
    root: '/',
    routes: [
        {
            path: '/user',
            component: UserList,
            name: 'user.list'
        }, {
            path: '/user-models',
            component: UserModelsList,
            name: 'user-models.list'
        }
    ]
});

And this in my component:

<router-link :to="{path: '/user'}">User</router-link>
<router-link :to="{path: '/items'}">Other Items</router-link>
<router-link :to="{path: '/user-models'}">User Models</router-link>

And this is the result:

^ as you can see... both router-link elements are marked as active even tho is should only be matching one of them.

[theshem]

@morficus That is a different issue. I guess the exact property is what you are looking for:

Check out the exact property in vue-router doc.

For instance:

<router-link :to="{path: '/user'}" exact>User</router-link>
<router-link :to="{path: '/items'}" exact>Other Items</router-link>
<router-link :to="{path: '/user-models'}" exact>User Models</router-link>

[LinusBorg]

@HashemQolami well, @morficus has a point.

It you want use exact false to highlight a route including all subroutes, and ad the same time have a sibling route whose path starts with the same string (as above: /user and /user-items), that sibling would incorrectly be highlighted as well.

@morficus But it _is_ indeed a seperate problem, please open a separate issue.

[morficus]

@LinusBorg and @HashemQolami - I'll open a new issue

But (at least for now) my "work around" is to change the path attribute on my router-link elements from /user to /user/ and it solved the highlighting problem.

Tho I do see why you would rather treat this is a different issue (because the root cause is not the same).