Vue路由器活动链接不适用于父级，但适用于子级

Question

我的设置

我有使用带有嵌套路由的vue路由器的vue应用程序。我也在使用vuetify。我的问题是这个。。。

我的问题

当我在导航栏上导航时，活动类在导航栏上没有移动。菜单项的底部带有边框，以使您具有“选定”的感觉。

在下面的代码中是我的路线。这几乎也说明了我项目的结构。 我的方法是查看/主题/，我有一个页面/主页/历史/详细信息

期望我的导航栏功能：

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

我的文件夹设置示例：

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

ApprovalPage中的导航菜单可以正确导航和突出显示。但是，它只是最上方的导航器不会移动。

另一件事是，一切都正确呈现。只是顶级导航的活动部分无法正常工作。

这是我的代码

路线

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工具栏项

    <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>