VueJS 라우터 - 서브루트와 Vuetify를 사용할 때 여러 활성화루트를 정지하려면 어떻게 해야 하나요?

VueJS 라우터 - 서브루트와 Vuetify를 사용할 때 여러 활성화루트를 정지하려면 어떻게 해야 하나요?

디폴트 '홈'을 정지하는 데 어려움을 겪고 있습니다.Vuetify에서 vue 경로가 활성화되지 않음(업로드 클릭 시 또는 기본 홈 설정 시)vue가 아직 활성화되어 있습니다.여기를 참조해 주세요.

그게 /webapp의 서브루트인 것과 관련이 있을 것 같은데, 나는 벽에 머리를 부딪치고 있어.

제 경로에서 중요한 부분은 다음과 같습니다.

    {
  path: '/webapp',
  name: 'webapp',
  component: () => import('./views/Webapp.vue'),
  children: [
          {
            path: '',
            component: () => import('./components/Home.vue'),
          },
          {
            path: 'uploads',
            component: () => import('./components/Uploads.vue'),
          },
          {
            path: 'settings',
            component: () => import('./components/Settings.vue'),
          }
  ]
}

이것은 나의 Vuetify 서랍입니다.

<v-navigation-drawer
  v-model="drawer"
  app

>
  <v-list dense>

    <v-list-item
      v-for="item in items"
      :key="item.title"
      :to="item.route"

    >
      <v-list-item-icon>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-icon>

      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

  </v-list>
</v-navigation-drawer>

를 추가해야 합니다.exact(또는exact={true})의 제안<v-list-item>컴포넌트:

<v-list-item
  v-for="item in items"
  :key="item.title"
  :to="item.route"
  exact

></v-list-item>

온v-list-item문서exact:

링크와 정확히 일치합니다.이것이 없으면 '/'은(는) 모든 경로와 일치합니다.정확한 소품에 대한 자세한 내용은 vue-router 설명서를 참조하십시오.

확인하실 수 있습니다.

https://vuetifyjs.com/en/components/list-item-groups#list-item-groups

Nelio의 답변은 완벽하게 작동하며 다음과 같은 v-list-tile에서도 작동합니다.

<v-list dense> 
  <div v-for="(kid, k) in parent.children" :key="k">
     <v-list-tile :to="{path: kid.path}" exact>
         <v-list-tile-title>{{kid.name}}</v-list-tile-title>
     </v-list-tile>
  </div>
</v-list>

언급URL : https://stackoverflow.com/questions/57394484/vuejs-router-how-do-i-stop-multiple-active-routes-when-using-sub-routes-and-vu