router-link怎么设置样式

我们可以通过以下两种方式来设置`router-link`的样式：

1. 在`router`实例对象中添加`myactive: 'router-link-active'`，然后在`router-link`组件上添加`:class="$route.name === 'xxx' ? $router.myactive : ''"`即可。其中，`xxx`是你想要设置样式的路由名称。

   const router = new VueRouter({
     routes: [
       {
         path: '/',
         name: 'home',
         component: Home
       },
       {
         path: '/about',
         name: 'about',
         component: About
       }
     ],
     // 添加 myactive 属性
     myactive: 'router-link-active'
   })

   <router-link to="/" :class="$route.name === 'home' ? $router.myactive : ''">Home</router-link>
   <router-link to="/about" :class="$route.name === 'about' ? $router.myactive : ''">About</router-link>

2. 在`router-link`组件上添加`active-class='active'`属性，并在CSS中设置`.active`样式即可。

   <router-link to="/" active-class="active">Home</router-link>
   <router-link to="/about" active-class="active">About</router-link>

   .active {
     color: red;
     font-weight: bold;
   }