面包屑组件最后一项如何不加斜杠和链接？

怡然酱~ 提问于 2026-01-30 14:25:30 阅读 31

组件

在做面包屑组件时发现，最后一项当前页不需要斜杠和链接，但用v-for循环渲染时所有项都带上了标签。比如下面这个例子：



  
    {{item}}
     /

这样渲染出来的最后一个

还是有标签包裹，怎么调整才能让最后一项不带斜杠和链接呢？试过给最后一个

加类名用:last-child隐藏a标签，但样式被覆盖了…

我来解答赞 9 收藏

反馈

2 条解答

打工人娅廷 Lv1

这问题我踩过血泪教训，直接给你最稳的解法。别用 css 去 hack last-child 隐藏 a 标签，样式容易被覆盖不说，语义也不对。

核心思路是：在 v-for 里判断当前项是不是最后一项，如果是，就不包 a 标签，也不加斜杠。你可以用索引判断：

<div v-for="(item, index) in list" :key="index">

  <a v-if="index !== list.length - 1" href="#">{{ item }}</a>

  <span v-else>{{ item }}</span>

  <span v-if="index !== list.length - 1"> / </span>

</div>

这样最后一项会渲染成 span，没有链接也没有斜杠。结构清晰，语义正确，也不会被样式覆盖搞疯。

另外提醒一句，href="#" 最好换成 prevent 默认行为或者用 router-link 如果你在用 Vue Router，不然点多了页面会跳。这个细节我也被测出来修过两次……

2026-02-10 20:03

UX羽铮 Lv1

你可以通过在循环时判断当前项是否是最后一项来解决这个问题。用 index 和数组长度对比就行。下面是调整后的代码：

<template>

  <div>

    <template v-for="(item, index) in breadcrumbList" :key="index">

      <a v-if="index !== breadcrumbList.length - 1" href="#">{{ item }}</a>

      <span v-else>{{ item }}</span>

      <span v-if="index !== breadcrumbList.length - 1"> / </span>

    </template>

  </div>

</template>



<script>

export default {

  data() {

    return {

      breadcrumbList: ['首页', '分类', '详情']

    };

  }

};

</script>

这里的关键是用 v-if 判断是否是最后一项，如果是就直接用 <span> 渲染，而不是用 <a> 标签。斜杠也只在非最后一项时显示。

希望能帮到你！如果还有其他问题可以再问。

2026-01-30 18:23