VueJS 路由器 - 使用子路由和 Vuetify 时如何停止多个活动路由？

Posted 2023-02-22

【中文标题】VueJS 路由器 - 使用子路由和 Vuetify 时如何停止多个活动路由？

【英文标题】：VueJS Router - How do I stop multiple active routes when using sub routes and Vuetify?

【发布时间】：2019-12-15 02:17:56

【问题描述】：

我正在努力阻止默认的 '' Home.vue 路由在 Vuetify 中不处于活动状态，即当我单击上传或设置时，默认的 Home.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>

【参考方案1】：

您必须将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-itemexact 的文档中：

完全匹配链接。没有这个，'/' 将匹配每条路由。您可以在 vue-router 文档中找到有关确切属性的更多信息。

你可以看看：

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

【讨论】：

非常感谢 Nelio :-)

【参考方案2】：

Nélio 的回答完美无缺，它也适用于 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>