My page currently has Navigation.vue component. I want to make the each navigation hover and active. The hover
works but active
doesn't.
This is how Navigation.vue file looks like :
<template>
<div>
<nav class="navbar navbar-expand-lg fixed-top row">
<router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
<router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
<router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
<router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
</nav>
</div>
</template>
And the following is the style.
<style>
nav li:hover,
nav li:active {
background-color: indianred;
cursor: pointer;
}
</style>
This is how hover looks like now and expected exactly same on active.
https://i.stack.imgur.com/wOVg4.png
I would appreciate if you give me an advice for styling router-link
active works. Thanks.
linkExactActiveClass
as a property of your router (where you add the routes
).
The :active pseudo-class is not the same as adding a class to style the element.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the mouse button is pressed down and ends when it is released.
What we are looking for is a class, such as .active
, which we can use to style the navigation item.
For a clearer example of the difference between :active
and .active
see the following snippet:
li:active { background-color: #35495E; } li.active { background-color: #41B883; }
Vue-Router
vue-router
automatically applies two active classes, .router-link-active
and .router-link-exact-active
, to the <router-link>
component.
router-link-active
This class is applied automatically to the <router-link>
component when its target route is matched.
The way this works is by using an inclusive match behavior. For example, <router-link to="/foo">
will get this class applied as long as the current path starts with /foo/
or is /foo
.
So, if we had <router-link to="/foo">
and <router-link to="/foo/bar">
, both components would get the router-link-active
class when the path is /foo/bar
.
router-link-exact-active
This class is applied automatically to the <router-link>
component when its target route is an exact match. Take into consideration that both classes, router-link-active
and router-link-exact-active
, will be applied to the component in this case.
Using the same example, if we had <router-link to="/foo">
and <router-link to="/foo/bar">
, the router-link-exact-active
class would only be applied to <router-link to="/foo/bar">
when the path is /foo/bar
.
The exact prop
Lets say we have <router-link to="/">
, what will happen is that this component will be active for every route. This may not be something that we want, so we can use the exact
prop like so: <router-link to="/" exact>
. Now the component will only get the active class applied when it is an exact match at /
.
CSS
We can use these classes to style our element, like so:
nav li:hover,
nav li.router-link-active,
nav li.router-link-exact-active {
background-color: indianred;
cursor: pointer;
}
The <router-link>
tag was changed using the tag
prop, <router-link tag="li" />
.
Change default classes globally
If we wish to change the default classes provided by vue-router
globally, we can do so by passing some options to the vue-router
instance like so:
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
Change default classes per component instance (
If instead we want to change the default classes per <router-link>
and not globally, we can do so by using the active-class
and exact-active-class
attributes like so:
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
v-slot API
Vue Router 3.1.0+ offers low level customization through a scoped slot. This comes handy when we wish to style the wrapper element, like a list element <li>
, but still keep the navigation logic in the anchor element <a>
.
<router-link
to="/foo"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<li
:class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
>
<a :href="href" @click="navigate">{{ route.fullPath }}</a>
</li>
</router-link>
When you are creating the router, you can specify the linkExactActiveClass
as a property to set the class that will be used for the active router link.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes,
linkActiveClass: "active", // active class for non-exact links.
linkExactActiveClass: "active" // active class for *exact* links.
})
This is documented here.
/
as active (since URLs like /about
contain it).
https://router.vuejs.org/en/api/router-link.html add attribute active-class="active" eg:
<ul class="nav navbar-nav">
<router-link tag="li" active-class="active" to="/" exact><a>Home</a></router-link>
<router-link tag="li" active-class="active" to="/about"><a>About</a></router-link>
<router-link tag="li" active-class="active" to="/permission-list"><a>Permisison</a></router-link>
</ul>
exact
attribute is relevant to avoid false triggering
Just add to @Bert's solution to make it more clear:
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes,
linkExactActiveClass: "active" // active class for *exact* links.
})
As one can see, this line should be removed:
linkActiveClass: "active", // active class for non-exact links.
this way, ONLY the current link is hi-lighted. This should apply to most of the cases.
David
As mentioned above by @Ricky vue-router automatically applies two active classes, .router-link-active
and .router-link-exact-active
, to the <router-link>
component.
So, to change active link css use:
.router-link-exact-active {
//your desired design when link is clicked
font-weight: 700;
}
Let's make things simple, you don't need to read the document about a "custom tag" (as a 16 years web developer, I have enough this kind of tags, such as in struts, webwork, jsp, rails and now it's vuejs)
just press F12, and you will see the source code like:
<div>
<a href="#/topologies" class="luelue">page1</a>
<a href="#/" aria-current="page" class="router-link-exact-active router-link-active">page2</a>
<a href="#/databases" class="">page3</a>
</div>
so just add styles for the .router-link-active
or .router-link-exact-active
If you want more details, check the router-link
api: https://router.vuejs.org/guide/#router-link
Success story sharing