How to VueJS router-link active style

Question

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     lt template gt       lt div gt           lt nav class  navbar navbar-expand-lg fixed-top row  gt                        lt router-link tag  li  class  col  class-active  active  to     exact gt TIME lt  router-link gt                       lt router-link tag  li  class  col  class-active  active  to   CNN  exact gt CNN lt  router-link gt                       lt router-link tag  li  class  col  class-active  active  to   TechCrunch  exact gt TechCrunch lt  router-link gt                       lt router-link tag  li  class  col  class-active  active  to   BBCSport  exact gt BBC Sport lt  router-link gt           lt  nav gt       lt  div gt   lt  template gt    And the following is the style    lt style gt      nav li hover     nav li active        background-color  indianred        cursor  pointer          lt  style gt    This is how hover looks like now and expected exactly same on active    I would appreciate if you give me an advice for styling router-link active works  Thanks

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  li active   x000D    background-color   35495E  x000D    x000D   x000D  li active   x000D    background-color   41B883  x000D    x000D   lt ul gt  x000D     lt li gt  active  pseudo-class  - Click me  lt  li gt  x000D     lt li class  active  gt  active  class  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D      Vue-Router  vue-router automatically applies two active classes   router-link-active and  router-link-exact-active  to the  lt router-link gt  component     router-link-active  This class is applied automatically to the  lt router-link gt  component when its target route is matched    The way this works is by using an inclusive match behavior  For example   lt router-link to   foo  gt  will get this class applied as long as the current path starts with  foo  or is  foo   So  if we had  lt router-link to   foo  gt  and  lt router-link to   foo bar  gt   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  lt router-link gt  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  lt router-link to   foo  gt  and  lt router-link to   foo bar  gt   the router-link-exact-activeclass would only be applied to  lt router-link to   foo bar  gt  when the path is  foo bar     The exact prop  Lets say we have  lt router-link to     gt   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   lt router-link to     exact gt   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  lt router-link gt  tag was changed using the tag prop   lt router-link tag  li    gt      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   lt router-link gt    If instead we want to change the default classes per  lt router-link gt  and not globally  we can do so by using the active-class and exact-active-class attributes like so    lt router-link to   foo  active-class  active  gt foo lt  router-link gt    lt router-link to   bar  exact-active-class  exact-active  gt bar lt  router-link gt      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  lt li gt   but still keep the navigation logic in the anchor element  lt a gt     lt router-link   to   foo    v-slot    href  route  navigate  isActive  isExactActive     gt     lt li      class   isActive  amp  amp   router-link-active   isExactActive  amp  amp   router-link-exact-active       gt       lt a  href  href   click  navigate  gt    route fullPath    lt  a gt     lt  li gt   lt  router-link gt

User · Answer

https   router vuejs org en api router-link html add attribute active-class  active  eg    lt ul class  nav navbar-nav  gt       lt router-link tag  li  active-class  active  to     exact gt  lt a gt Home lt  a gt  lt  router-link gt       lt router-link tag  li  active-class  active  to   about  gt  lt a gt About lt  a gt  lt  router-link gt       lt router-link tag  li  active-class  active  to   permission-list  gt  lt a gt Permisison lt  a gt  lt  router-link gt   lt  ul gt

User · Answer

As mentioned above by  Ricky vue-router automatically applies two active classes   router-link-active and  router-link-exact-active  to the  component   So  to change active link css use    router-link-exact-active     your desired design when link is clicked font-weight  700

User · Answer

Let s make things simple  you don t need to read the document about a  quot custom tag quot   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       lt div gt           lt a href  quot   topologies quot  class  quot luelue quot  gt page1 lt  a gt            lt a href  quot    quot  aria-current  quot page quot  class  quot router-link-exact-active router-link-active quot  gt page2 lt  a gt            lt a href  quot   databases quot  class  quot  quot  gt page3 lt  a gt       lt  div gt   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 en api  router-link

[vue.js] How to VueJS router-link active style

Examples related to vue.js

Examples related to vue-router

Examples related to routerlink