https://gaute.dev/assets/today-i-learned_vue-router-link-active.md.6c366d49.js

1import{_ as n,c as t,b as c,e as o,s as r,o as p,a as l,q as s}from"./chunks/framework.24cd38f4.js";const k=JSON.parse('{"title":"Active router link CSS class","description":"How to style your active links with Vue router.","frontmatter":{"title":"Active router link CSS class","date":"2019-11-17T00:00:00.000Z","updated":"2022-02-24T00:00:00.000Z","category":"Vue","description":"How to style your active links with Vue router."},"headers":[],"relativePath":"today-i-learned/vue-router-link-active.md"}'),i={name:"today-i-learned/vue-router-link-active.md"};function D(y,e,F,u,B,d){const a=r("ToggleView");return p(),t("div",null,[c(a,{options:["Vue 3","Vue 2"]},{0:o(()=>[...e[0]||(e[0]=[l("p",null,[s("The Vue Router automatically applies "),l("code",null,"router-link-active"),s(" to active router links. No need to compare the URL yourself.")],-1),l("div",{class:"language-vue"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"vue"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"router-link"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#C792EA"}},"to"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"/link"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"Link"),l("span",{style:{color:"#89DDFF"}},"</"),l("span",{style:{color:"#F07178"}},"router-link"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
2`),l("span",{class:"line"})])])],-1),l("div",{class:"language-css"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"css"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"."),l("span",{style:{color:"#FFCB6B"}},"router-link-active"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{")]),s(`
3`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#B2CCD6"}},"background"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," blue"),l("span",{style:{color:"#89DDFF"}},";")]),s(`
4`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"}")]),s(`
5`),l("span",{class:"line"})])])],-1),l("p",null,[s("If you have nested routes, you can also use "),l("code",null,"router-link-exact-active"),s(" to differentiate between active routes and the exact active child route.")],-1),l("div",{class:"language-js"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"js"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#C792EA"}},"const"),l("span",{style:{color:"#BABED8"}}," routes "),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#BABED8"}}," [")]),s(`
6`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"{")]),s(`
7`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#F07178"}},"path"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"/parent"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
8`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#F07178"}},"children"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," ["),l("span",{style:{color:"#89DDFF"}},"{"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#F07178"}},"path"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"child"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"}"),l("span",{style:{color:"#BABED8"}},"]"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
9`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"},")]),s(`
10`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"]")]),s(`
11`),l("span",{class:"line"})])])],-1),l("div",{class:"language-css"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"css"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"."),l("span",{style:{color:"#FFCB6B"}},"router-link-exact-active"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{")]),s(`
12`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#B2CCD6"}},"background"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," red"),l("span",{style:{color:"#89DDFF"}},";")]),s(`
13`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"}")]),s(`
14`),l("span",{class:"line"})])])],-1),l("p",null,[s("Now visiting "),l("code",null,"/parent/child"),s(" a link 

14with "),l("code",null,"/parent"),s(" would be "),l("code",null,"router-link-active"),s(", but only "),l("code",null,"/parent/child"),s(" is both "),l("code",null,"router-link-active"),s(" and "),l("code",null,"router-link-exact-active"),s(".")],-1)])]),1:o(()=>[...e[1]||(e[1]=[l("p",null,"The Vue Router automatically applies classes to active router links. No need to compare the URL yourself.",-1),l("div",{class:"language-vue"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"vue"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"router-link"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#C792EA"}},"to"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"/link"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"Link"),l("span",{style:{color:"#89DDFF"}},"</"),l("span",{style:{color:"#F07178"}},"router-link"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
15`),l("span",{class:"line"})])])],-1),l("p",null,"can now be targeted with",-1),l("div",{class:"language-css"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"css"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"."),l("span",{style:{color:"#FFCB6B"}},"router-link-active"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{")]),s(`
16`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#B2CCD6"}},"background"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," blue"),l("span",{style:{color:"#89DDFF"}},";")]),s(`
17`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"}")]),s(`
18`),l("span",{class:"line"}),s(`
19`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"."),l("span",{style:{color:"#FFCB6B"}},"router-link-exact-active"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{")]),s(`
20`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#B2CCD6"}},"background"),l("span",{style:{color:"#89DDFF"}},":"),l("span",{style:{color:"#BABED8"}}," red"),l("span",{style:{color:"#89DDFF"}},";")]),s(`
21`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"}")]),s(`
22`),l("span",{class:"line"})])])],-1),l("p",null,[s("The difference between "),l("code",null,"router-link-exact-active"),s(" and "),l("code",null,"router-link-active"),s(" is that the exact only applies if the entire URL matches, while the "),l("code",null,"router-link-active"),s(" is applied if it is part of the URL, the user is on a sub-path or exact path.")],-1)])]),_:1})])}const v=n(i,[["render",D]]);export{k as __pageData,v as default};