My Setup

I have vue application using vue router with nested routes. I'm using vuetify as well. My issue is this....

My Issue

When I navigate on the Navbar, the active class isn't moving on the navbar. The menu item has a border-bottom on it to be able to have a "selected" feel to it.

In the code below are my routes. This pretty much speaks to the structure of my project too. My approach is Views/Topic/ and I have a Page/Home/History/Detail

Expectation of my navbar functionality:

Approvals          --  If you are on any of these these below, This will be highlighted
-> ApprovalPage    --  This contains the menu and a router-view in a column
-> ApprovalHome    --  This is a menu item in the approval page. It will be highlighted if it is selected
-> ApprovalHistory --  This is a menu item in the approval page. It will be highlighted if it is selected
-> ApprovalDetail  --  This is a menu item in the approval page. It will be highlighted if it is selected

Example of my folder setup:

Approvals
-> ApprovalPage    --  This contains the menu and a router-view in a column
-> ApprovalHome    --  This will be rendered on the Approval Page
-> ApprovalHistory --  This will be rendered on the Approval Page
-> ApprovalDetail  --  This will be rendered on the Approval Page

The navigation menu inside the ApprovalPage can navigate and highlight correctly. However, it's just the top nav that doesn't move.

The other thing is, everything renders correctly. It's just the active part of the top nav that doesn't work.

Here is my code

Routes

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/requests',
      name: 'requests',
      component: RequestsPage,
      children: [
        {
          path: '',
          name: 'RequestsHome',
          component: RequestsHome,
        },
        {
          path: 'history',
          name: 'RequestHistory',
          component: RequestHistory,
        },
        {
          path: ':id',
          name: 'RequestDetail',
          component: RequestDetail,
        },
      ],
    },
    {
      path: '/approvals',
      name: 'approvals',
      component: ApprovalsPage,
      children: [
        {
          path: '',
          name: 'ApprovalsHome',
          component: ApprovalHome,
        },
        {
          path: 'history',
          name: 'ApprovalsHistory',
          component: ApprovalHistory,
        },
        {
          path: ':id',
          name: 'ApprovalsDetail',
          component: ApprovalDetail,
        },
      ],
    },
    {
      path: '/workflows',
      name: 'workflows',
      component: WorkflowPage,
      children: [
        {
          path: '',
          name: 'workflowsHome',
          component: WorkflowHome,
        },
        {
          path: 'creator',
          name: 'creator',
          component: WorkflowCreator,
        },
      ],
    },
  ],
});

NavBar toolbar items

    <v-toolbar-items 
    class="ml-5"
    >
      <v-btn 
      text 
      to="/" 
      exact 
      >
      Home</v-btn>
      <v-btn 
      text 
      to="/approvals/" 
      >
      Approvals</v-btn>
      <v-btn 
      text 
      to="/requests/" 
      >
      Requests</v-btn>
      <v-menu
        tile
        right
        offset-y
        open-on-hover
      >
        <template v-slot:activator="{ on }">
          <v-btn 
          text 
          v-on="on"
          to="/workflows/"
          >
          Workflows</v-btn>
        </template>

        <v-list>
          <v-list-item to="/workflows/" exact>
            <v-list-item-title>Workflows</v-list-item-title>
          </v-list-item>
          <v-list-item to="/workflows/creator" exact>
            <v-list-item-title>Workflow Creator</v-list-item-title>
          </v-list-item>
        </v-list>

      </v-menu>

    </v-toolbar-items>