Vue Router Active Link Не работает на родителя, но работает на детей - PullRequest
Новая
       7

Vue Router Active Link Не работает на родителя, но работает на детей

0 голосов
/ 23 октября 2019

Мои настройки

У меня есть приложение vue, использующее маршрутизатор vue с вложенными маршрутами. Я тоже использую vuetify. Моя проблема заключается в следующем ...

Моя проблема

Когда я перемещаюсь по навигационной панели, активный класс не перемещается по навигационной панели. Элемент меню имеет нижнюю границу для того, чтобы его можно было «выбрать». В коде ниже приведены мои маршруты. Это в значительной степени говорит и о структуре моего проекта. Мой подход - Взгляды / Тема / и у меня есть Страница / Домой / История / ДеталиОжидание моей функциональности navbar: 

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