Bootstrap-Vue - 导航选项卡对路由器上的儿童无效答案

【问题标题】：Bootstrap-Vue - Nav tabs not active for children on routerBootstrap-Vue - 导航选项卡对路由器上的儿童无效
【发布时间】：2019-12-29 03:08:33
【问题描述】：

版本：

"bootstrap-vue": "^2.0.0-rc.27",
"vue": "^2.6.10",
"vue-router": "^3.0.3",

我的 vue-router 在/app/groups 路由上有孩子。在孩子们中，我创建了<b-nav pills> 以导航groups，但是tabs 没有显示为.active。我在路线上使用params，不确定这是否会影响它。有什么想法吗？

GroupContainer.vue

<template>
  <div>
    <b-container class="pt-3">
      <b-nav pills align="center">
        <b-nav-item :to="{ name: 'group.edit', params: { id: this.$route.params.id }}" >Group</b-nav-item>
        <b-nav-item :to="{ name: 'group.users', params: { id: this.$route.params.id }}" >Users</b-nav-item>
      </b-nav>
    </b-container>
    <DefaultPage title="Group name" subtitle="Settings">
      <router-view></router-view>
    </DefaultPage>
  </div>
</template>

<script>
import DefaultPage from '../layouts/DefaultPage.vue'

export default {
  name: 'GroupContainer',
  components: {
    DefaultPage
  }
}
</script>

router.js

{ path: "/app/group", component: GroupContainer,
    children: [
      { path: "", component: NotFound },
      { path: ":id", name: "group.edit", component: GroupEdit },
      { path: ":id/delete", name: "group.delete", component: GroupDelete },
      { path: ":id/users", name: "group.users",  component: GroupUsers },
      { path: ":id/users/:userID", name: "group.users.edit", component: GroupEditUser },
      { path: ":id/users/:userID/delete", name: "group.users.delete", component: GroupDeleteUser },
      { path: ":id/add-user", name: "group.addUser", component: GroupAddUser }, 
    ]
  },

【问题讨论】：

标签： javascript vue.js vue-router bootstrap-vue

【解决方案1】：

使用active-class 或exact-active-class 属性，并将其设置为'active'

  <b-nav pills align="center">
    <b-nav-item
       :to="{ name: 'group.edit', params: { id: this.$route.params.id }}"
       :exact-active-class="active"
    >Group</b-nav-item>
    <b-nav-item
      :to="{ name: 'group.users', params: { id: this.$route.params.id }}"
      :exact-active-class="active"
    >Users</b-nav-item>
  </b-nav>

https://bootstrap-vue.js.org/docs/reference/router-links

【讨论】：