Vuetify list : 根据活动路由打开组答案

【问题标题】：Vuetify list : open group according to active routeVuetify list : 根据活动路由打开组
【发布时间】：2019-11-11 06:06:25
【问题描述】：

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

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

我的列表工作正常：如果我点击“Item1”，vue-router 会转到“/item1”。

相反，当我转到某个路线“/item1”（例如通过输入 URL）并且 Group1 在列表中关闭时，是否可以使 Group1 在列表中自动打开？

我是否必须观看路线并使用 v-list-group.value 来设置开放组，或者 Vuetify 是否有自动执行此操作的功能？

【问题讨论】：

你在使用 Vue 路由器吗？ /item1 是由 Vue Router 处理的路由吗？
是的，我应该提到我正在使用 vue-router
您是否考虑过为您的路线添加道具，而不是让路线受到关注？ (router.vuejs.org/guide/essentials/passing-props.html) 如果是这样，而且那不合适，那么是的，观看您的路线将被视为合乎逻辑的选择。
@chisnall.io 我不明白路由道具如何解决我的问题。你能解释一下吗？

标签： vue.js vuejs2 vue-router vuetify.js

【解决方案1】：

这是我使用路由监视的解决方案：https://codesandbox.io/s/vuetify-router-template-0176-vy766（基于 Daniel 的代码）。

有趣的部分在 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;
    }
  }
}

【讨论】：