vue多级目录实现

Vue 多级目录实现方法

使用嵌套路由

Vue Router支持嵌套路由配置，适合实现多级目录结构。在路由配置文件中定义子路由，通过children属性实现层级关系。

const routes = [
  {
    path: '/category',
    component: Category,
    children: [
      {
        path: 'subcategory',
        component: SubCategory,
        children: [
          {
            path: 'detail',
            component: Detail
          }
        ]
      }
    ]
  }
]

动态路由匹配

对于不确定的目录层级，可以使用动态路由参数。通过path中的:标识动态参数，组件内通过$route.params访问。

{
  path: '/category/:id',
  component: Category,
  children: [
    {
      path: ':subId',
      component: SubCategory
    }
  ]
}

递归组件

对于深度不确定的目录结构，可以使用递归组件。组件内部调用自身，通过v-for和条件渲染实现无限层级。

<template>
  <div>
    <div @click="toggle">{{ item.name }}</div>
    <div v-if="isOpen && item.children">
      <tree-item
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: ['item'],
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

状态管理

对于复杂的多级目录交互，建议使用Vuex或Pinia管理状态。将目录数据存储在store中，组件通过getters获取数据，通过mutations或actions更新状态。

// store示例
const store = new Vuex.Store({
  state: {
    categories: []
  },
  mutations: {
    SET_CATEGORIES(state, payload) {
      state.categories = payload
    }
  },
  actions: {
    async fetchCategories({ commit }) {
      const res = await api.getCategories()
      commit('SET_CATEGORIES', res.data)
    }
  }
})

UI组件库集成

多数UI组件库如Element UI、Ant Design Vue都提供现成的树形组件，可直接用于多级目录展示。这些组件通常支持懒加载、复选框、拖拽等功能。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级目录',
        children: [{
          label: '二级目录'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

面包屑导航

多级目录通常需要配套的面包屑导航，可通过监听路由变化动态生成。使用$route.matched获取当前路由的所有匹配记录，转换为面包屑路径。

<template>
  <div class="breadcrumb">
    <span v-for="(item, index) in breadcrumbs" :key="index">
      <router-link v-if="index < breadcrumbs.length - 1" :to="item.path">
        {{ item.meta.title }}
      </router-link>
      <span v-else>{{ item.meta.title }}</span>
      <span v-if="index < breadcrumbs.length - 1"> / </span>
    </span>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      return this.$route.matched.filter(route => route.meta && route.meta.title)
    }
  }
}
</script>