Vuetify 列表:根据活动路由打开组 [英] Vuetify list : open group according to active route

问题描述

假设我有一个包含 2 个 v-list-group 的 Vuetify 列表，每个列表包含一个 v-list-tile.这是一个简化的伪代码:

Let's suppose I have a Vuetify list with 2 v-list-group, each one containing a v-list-tile. Here is a simplified pseudo-code:

 - Group1
   - Item 1 :to='/item1'
 - Group2
   - Item 2 :to='/item2'

我的列表工作正常:如果我点击Item1"，vue-router 会转到/item1".

My list works fine : if I click on "Item1", vue-router goes to "/item1".

相反，当我转到某个路由/item1"(例如通过键入 URL)并且 Group1 在列表中关闭时，是否可以让 Group1 在列表中自动打开?

Conversely, when I go to some route '/item1' (by typing the URL for example) and Group1 is closed in the list, is it possible to make Group1 to automatically open in the list?

我是否必须监视路由并使用 v-list-group.value 来设置开放组，或者 Vuetify 是否可以自动执行此操作?

Do I have to watch route and use v-list-group.value to set the open group, or does Vuetify have something to do this automatically?

推荐答案

这是我使用 route watch 的解决方案:https://codesandbox.io/s/vuetify-router-template-0176-vy766(基于 Daniel 的代码).

Here is my solution using route watch : https://codesandbox.io/s/vuetify-router-template-0176-vy766 (based on Daniel's code).

有趣的部分在 Nav.vue:`

The insteresting part is in Nav.vue:`

watch: {
  $route(to, from) {
    if (to.matched.length > 1) {
      const parent = to.matched.filter(m => !m.parent)[0];
      const route = routes.filter(route => route.name === parent.name)[0];
      route.active = true;
    }
  }
}

这篇关于Vuetify 列表:根据活动路由打开组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！