CODEWITHSUNDEEP
javascriptvue.jsvue-routerbootstrap-vue
Blackstone4
Blackstone4

Reputation: 681

Bootstrap-Vue - Nav tabs not active for children on router

Versions:

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

My vue-router has children on the /app/groups route. Within the children, I created <b-nav pills> in order to navigate groups however the tabs are not showing up as .active. I'm using params on the routes, not sure if this affects it. Any ideas?

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 }, 
    ]
  },

Upvotes: 0

Views: 1833

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

use the active-class or exact-active-class prop, and set it to '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

Upvotes: 1

Related Questions