使用嵌套选项卡在vuejs中导航

这是我需要的。页面左侧有驱动器选项卡,顶部有文件夹选项卡。主要内容是文件,但并不重要。我用path/:drive/:folder和props:true设置了vue路由器,以便将驱动器/文件夹传递给组件

component('drives', {
  props: ['drive', 'folder'],
  template: '<tabs v-model="drive" position="left">
    <tab v-for="drv in drives"><folders :drive="drv.Name" :folder="folder"/></tab>
  </tabs>'
})

component('folders', {
  props: ['drive', 'folder'],
  template: '<tabs v-model="folder">
    <tab v-for="fld in folders"><files :drive="drive" :folder="fld"/></tab>
  </tabs>'
})

router.add({ path: '/:drive/:folder', component: 'drives', props: true })

请注意,我不希望文件/子文件夹位于路由路径中。标签是来自类星体框架的,并不重要。

我遇到的一个大问题是,当用户将驱动器从C切换到D时—我只知道我需要将当前路径/路由/url从C更改为D,所以/C/FOLDER1变成/D/FOLDER1—但是没有 不

• 我需要更改当前路径

我认为我能做到这一点的唯一方法是维护一个数据结构,如

{
   C: { current: 'FOLDER1' },
   D: { current: 'FOLDERZ' }
}

而且它可以得到更深的嵌套!因此,我将拥有包含所有驱动器/文件夹/文件及其“当前”值的顶级结构,以便在驱动器更改时正确切换路由。

UPD:Hm,既然我写了它,我想在tab click事件(我更改了驱动器路径)中,我可以在设置新路径之前记住先前选择的驱动器的当前文件夹。因此,如果选项卡更改回该驱动器,我可以在不处理子组件的情况下恢复它。但我想知道这是否是解决此类设计的正确方法。

一般来说,我不确定处理此类UI需求的最佳方法是什么。例如,我可以听$route的变化,而不是作为道具通过。或者传递类似于完整路径的信息。或者是我没想到的其他事情?