四十三、Vue中使用 router-link 导致文字颜色变化的解决方案

案例：

<ul> <!-- border-bottom：1像素边框 --> <li class="item border-bottom" v-for="item of list" :key="item.id"> <img class="item-img" :src="item.imgUrl" /> <div class="item-info"> <p class="item-title">{{item.title}}</p> <p class="item-desc">{{item.desc}}</p> <button class="item-button">查看详情</button> </div> </li> </ul>

解决方案：

<ul> <!-- border-bottom：1像素边框 --> <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id"> <img class="item-img" :src="item.imgUrl" /> <div class="item-info"> <p class="item-title">{{item.title}}</p> <p class="item-desc">{{item.desc}}</p> <button class="item-button">查看详情</button> </div> </router-link> </ul>