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

最新推荐文章于 2024-07-03 18:01:25 发布

咸鱼最牛逼

最新推荐文章于 2024-07-03 18:01:25 发布

阅读量8.8k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/panchang199266/article/details/90485414

版权

vue 专栏收录该内容

48 篇文章 4 订阅

订阅专栏

案例：

        <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>