Question

版本：

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

我的Vue路由器在/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 }, 
    ]
  },

Answer 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

Bootstrap-Vue-导航选项卡不适用于路由器上的子级

1 个答案: