현재선택 목록 css 사용자 정의

exact 속성을 넣어주면 "/" 라우터에 색상제거 할 수 있음 

                           <ul>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/" exact>LOGO</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/logo-symbol">LOGO SYMBOL</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/colors">COLORS</router-link></li>
                         </ul>

하지만 더 간단하게 할 수 있다.

resources/js/routes.js

아래의 소스를 삽입하자

linkActiveClass: 'font-bold text-blue-500',

import Logo from './components/Logo';
 
import LogoSymbol from './components/LogoSymbol';
 
import Colors from './components/Colors';
 
export default{
 
    mode : 'history',
 
    linkActiveClass: 'font-bold text-blue-500',
 
    routes:[
        {
            path: '/',
 
            component: Logo
        },
 
        {
            path: '/logo-symbol',
 
            component: LogoSymbol
        },
 
        {
            path: '/colors',
 
            component: Colors
        },
    ]
 
};
 

결과는 위와 같다. 코드가 더 간결해진다.