How to activate VueJS router-link style

Question

My page currently has the Navigation.vue component. I want every navigation and active navigation. Guidance works, but active does not.

This is what the 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 here is the style.

 <style> nav li:hover, nav li:active{ background-color: indianred; cursor: pointer; } </style> 

Here's what the hang looks like now and was expected exactly the same in active mode.

I would be grateful if you would give me advice on styling the operation of the router link. Thanks.

Answer 1

The: active pseudo- class is not the same as adding a class to style an element.

The: active CSS pseudo-class represents an element (such as a button) that is activated by the user. When using a mouse, “activation” usually begins when the mouse button is pressed and ends when it is released.

We are looking for a class, for example .active , which we can use for the .active navigation element.

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; } 

 <ul> <li>:active (pseudo-class) - Click me!</li> <li class="active">.active (class)</li> </ul> 

---

View 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 automatically applied to the <router-link> component when its target route matches.

This works by using inclusive compliance behavior. For example, <router-link to="/foo"> will apply this class if 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 was /foo/bar ,

---

router-link-exact-active

This class is automatically applied to the <router-link> component when its target route matches exactly . Bear in mind 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 class router-link-exact-active would only apply to <router-link to="/foo/bar"> when the path is /foo/bar .

---

Precise support

Suppose we have <router-link to="/"> what happens if this component is active for each route. Perhaps this is not what we need, so we can use the exact support, for example, like this: <router-link to="/" exact> . Now the component will apply the active class only when it exactly matches / .

---

CSS

We can use these classes to style our element, like this:

  nav li:hover, nav li.router-link-active, nav li.router-link-exact-active { background-color: indianred; cursor: pointer; } 

The <router-link> been modified using tag prop, <router-link tag="li"/> .

---

Change default classes globally

If we want to change the default classes provided by vue-router globally, we can do this by passing some parameters to the vue-router instance, for example, like this:

 const router = new VueRouter({ routes, linkActiveClass: "active", linkExactActiveClass: "exact-active", }) 

Change default classes for component instance ( <router-link> )

If instead we want to change the default classes for <router-link> and not globally, we can do this 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> 

Answer 2

When you create a router, you can specify linkExactActiveClass as a property to set the class that will be used to link the active router.

 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 .

Answer 3

https://router.vuejs.org/en/api/router-link.html add the attribute active-class = "active", for example:

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