vue实现目录列表

Vue实现目录列表的方法

基础实现

使用v-for指令遍历数据数组生成目录列表，结合v-bind动态绑定属性。示例代码：

<template>
  <ul>
    <li v-for="(item, index) in menuItems" :key="index">
      <a :href="item.link">{{ item.title }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '首页', link: '/' },
        { title: '产品', link: '/products' },
        { title: '关于', link: '/about' }
      ]
    }
  }
}
</script>

嵌套目录结构

处理多级目录时使用递归组件。创建可复用的MenuItem组件：

<template>
  <li>
    <a v-if="!item.children" :href="item.link">{{ item.title }}</a>
    <span v-else>{{ item.title }}</span>
    <ul v-if="item.children">
      <menu-item 
        v-for="(child, i) in item.children" 
        :key="i" 
        :item="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: Object
  }
}
</script>

动态高亮当前页

通过计算属性匹配当前路由实现高亮效果：

computed: {
  activeRoute() {
    return this.$route.path
  }
}

模板中添加动态class：

<li 
  v-for="item in menuItems" 
  :class="{ 'active': item.link === activeRoute }"
>

响应式折叠菜单

添加v-show和点击事件控制子菜单显示/隐藏：

data() {
  return {
    isOpen: false
  }
},
methods: {
  toggleMenu() {
    this.isOpen = !this.isOpen
  }
}

模板中绑定状态：

<span @click="toggleMenu">{{ item.title }}</span>
<ul v-show="isOpen">
  <!-- 子菜单项 -->
</ul>

使用Vue Router

集成Vue Router实现SPA导航：

import { RouterLink } from 'vue-router'

<RouterLink 
  v-for="item in menuItems" 
  :to="item.link"
>
  {{ item.title }}
</RouterLink>