如何为Bootstrap-Vue的b-table元素添加点击跳转页面功能？

要实现表格中name或“更多详情”点击跳转页面，核心是利用Bootstrap-Vue的自定义列模板功能，结合路由链接或普通锚点标签来实现，分两种常见场景：

1. Vue单页应用（使用Vue Router） #

如果你的项目是基于Vue Router的单页应用，用<router-link>来实现无刷新跳转：

<b-table class="table table-bordered" id="my-table" striped hover :items="items" :per-page="perPage">
  <!-- 自定义name列，点击跳转到用户详情页 -->
  <template #cell(name)="{ item }">
    <router-link :to="`/user/${item.id}`" class="text-primary">{{ item.name }}</router-link>
  </template>

  <!-- 添加“更多详情”列 -->
  <template #cell(more_details)="{ item }">
    <router-link :to="`/user/detail/${item.id}`" class="btn btn-sm btn-outline-primary">更多详情</router-link>
  </template>
</b-table>

<script>
export default {
  data() {
    return {
      perPage: 10,
      items: [
        { id: 1, name: "Taylor", status: "passive" },
        { id: 2, name: "Tom", status: "passive" },
        { id: 3, name: "Arthur", status: "passive" }
      ]
    };
  }
};
</script>

2. 跳转外部页面/非SPA场景 #

如果是跳转到外部页面或传统多页应用，用普通<a>标签即可：

<b-table class="table table-bordered" id="my-table" striped hover :items="items" :per-page="perPage">
  <!-- 自定义name列，跳转外部详情页 -->
  <template #cell(name)="{ item }">
    <a :href="`/user-detail.html?id=${item.id}`" target="_blank" class="text-primary">{{ item.name }}</a>
  </template>

  <!-- 更多详情按钮 -->
  <template #cell(more_details)="{ item }">
    <a :href="`/user-detail.html?id=${item.id}`" target="_blank" class="btn btn-sm btn-outline-primary">更多详情</a>
  </template>
</b-table>

额外需求：点击整行跳转 #

如果需要点击表格整行都触发跳转，可以监听row-clicked事件：

<b-table 
  class="table table-bordered" 
  id="my-table" 
  striped 
  hover 
  :items="items" 
  :per-page="perPage"
  @row-clicked="handleRowJump"
>
</b-table>

<script>
export default {
  data() {
    return {
      perPage: 10,
      items: [/* 数据同上 */]
    };
  },
  methods: {
    handleRowJump(item) {
      // Vue Router跳转
      this.$router.push(`/user/${item.id}`);
      // 普通页面跳转（替换成你的URL）
      // window.location.href = `/user-detail.html?id=${item.id}`;
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Tolgahan Bulut