Vue.js: Add router-link-active to vue-router component loaded for root

Question

I'm having some trouble with vue-router. My routes are set up like this:

const routes = [
    { path: '/', component: a },
    { path: '/a', component: a },
    { path: '/b', component: b },
    { path: '/c', component: c }
]

As you can see, I want to load component a when the page loads. But I don't want the URL to change to /a when the page loads. However I would like to trigger the router-link-active-class on the <router-link> related to the a component, even though I'm still at /.

I've tried with some simple JS like:

if(window.location.hash === '#/') {
    var el = document.querySelector('#drawerList').firstElementChild;
    el.className += 'router-link-active';
}

However vue is not removing the class again when I click on the link to /b or /c. Can any of you hint me in the corrent direction?

score 8 · Accepted Answer · answered Mar 27 '17 at 09:05

8

You can manually bind class to router-link like this

<router-link :class="{'router-link-active': $route.fullPath ==='/' || $route.fullPath === '/a'}" to="/a"></router-link>

answered Mar 27 '17 at 09:05

bast

96
3

Wow, that is actually brilliant, and works flawlessly. Thank you! – moso Mar 27 '17 at 12:38
Best, cleanest answer out there still, thank you! – vedsil Jan 16 '21 at 23:47
This works well but for a little different scenario I am dealing with, is there any way to use wildcards in the conditions? Such as `$route.fullPath === '/user/*'`. – iamsubingyawali Sep 07 '22 at 16:28
**EDIT** I used regex to match pattern: https://stackoverflow.com/questions/73622296/router-link-active-not-applied-to-matching-routes – iamsubingyawali Sep 07 '22 at 17:11

score 6 · Answer 2 · answered Mar 13 '18 at 03:29

6

The best solution is use "exact" in root url

<router-link to="/" tag="a" exact>Home</router-link>

answered Mar 13 '18 at 03:29

Jakarea Parvez

540
6
9

score 0 · Answer 3 · answered Mar 26 '17 at 19:31

0

Try <router-link to="/" exact>

It prevents active class inclusive match behavior.

answered Mar 26 '17 at 19:31

Egor Stambakio

17,836
5
33
35

I looked into `exact`, but it didn't work as intended. Thanks, though! – moso Mar 27 '17 at 08:05

moso · Answer 4 · 2017-03-27T13:02:29.653

This is my pre-answer - see solution instead.

I ended up doing something custom, rather than seeking a native solution. After looking at a few issues on GitHub, I realised that something like this, stupid as it is - I admit, doesn't exist natively in Vue.js.

My solution: adding an eventlistener that removes itself along with the class, once another link is clicked in the #drawerMenu:

HTML structure:

<ul id="drawerMenu">
  <li>
    <router-link to="/a">A</router-link>
  </li>
  <li>
    <router-link to="/b">B</router-link>
  </li>
  <li>
    <router-link to="/c">C</router-link>
  </li>
</ul>

JS:

if(window.location.hash === '#/') {
    var menu = document.querySelector('#drawerMenu');
    var el = menu.firstElementChild.firstChild;
    el.className += 'router-link-active';

    var removeRouterClass = function () {
        el.classList.remove('router-link-active');
        menu.removeEventListener('click', removeRouterClass);
    }

    menu.addEventListener('click', removeRouterClass);
}

I hope this helps others like me, and hopefully this will be built into Vue natively at some point.

Alex · Answer 5 · 2021-11-11T18:56:21.513

In my case I had a use-case when I needed to have an active class whenever 1 of the following is true:

/users
/users/1/edit
/users/1/view

using vuejs 3 in main app.vue I have routes defined. The routes are then parameter-injected into sidemenu component (which is not important in this example)

app.vue dependencies

import { ref, watch } from "vue";
import { useRoute } from "vue-router";

setup() method (using composition API):

setup() {
const route = useRoute();

const myActiveClass = ref(null);

const checkIfMustActivateRoute = () => {
  return {
    active:
      window.location.pathname.startsWith("/users/view/") ||
      window.location.pathname.startsWith("/users/edit/"),
  };
};

watch(
  () => route.fullPath,
  async (_) => {
    myActiveClass.value = checkIfMustActivateRoute();
  }
);

myActiveClass.value = checkIfMustActivateRoute();

const routes = ref([
  { id: 0, name: "Home", href: "/", icon: "fas fa-home" },
  {
    id: 1,
    name: "Users",
    href: "/users",
    icon: "far fa-clone",
    class: myActiveClass,
  },
]);

return {
  routes,
};
},

NavLinks are dynamically generated like so:

  <li v-for="tab of routes" :key="tab.id" class="nav-item">
    <router-link :to="tab.href" class="nav-link" :class="tab.class">
      <div class="align-items-center">
        <span class="nav-link-icon"><i :class="tab.icon"></i></span>
        <span class="nav-link-text ms-3">{{ tab.name }}</span>
      </div>
    </router-link>
  </li>

Now whenever the router's path property changes I trigger the active class update function. This way we don't have to use aliases or any other trickery.

The result is - for all 3 paths I always enable active class.

score 0 · Answer 6 · answered Nov 30 '21 at 09:29

0

use could use exact-active-class on your router-link element.
Note: desiredClass is the class you want to apply if the URL matches the router-link's to attribute.

<router-link to="/about" exact-active-class="desiredClass">About</router-link>

answered Nov 30 '21 at 09:29

Mimina

2,603
2
29
21

Vue.js: Add router-link-active to vue-router component loaded for root

6 Answers6