Vue NavLink

Vue NavLink 是 Vue.js 框架中的一个组件，它用于创建带有活动 CSS 类的链接，以便在导航栏中高亮显示当前页面。您可以使用 Vue NavLink 来创建导航菜单，以便用户可以轻松地浏览您的网站。

相关问题

js代码改为用vue3实现

将上述的JavaScript代码转换成Vue 3的组件形式，我们可以创建两个组件：`NavItem` 和 `NestedList`，然后在主组件 `App` 中使用它们。以下是Vue 3的实现：

首先，创建一个名为`NavItem.vue` 的文件:

<template>
  <li :class="{ active: isActive(index) }" @click="toggleActive(index)">
    {{ item.text }}
    <slot v-if="item.subItems && isActive(index)" />
  </li>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const items = ref([
  // 与之前的HTML结构相对应的数据
]);

function toggleActive(index) {
  items.value.forEach((item, i) => {
    if (i !== index) {
      item.active = false;
    } else {
      item.active = !item.active;
    }
  });
}

function isActive(index) {
  return items.value[index].active;
}
</script>

<style scoped>
.active > * {
  display: block;
}
</style>

然后，创建`NestedList.vue` 文件:

<template>
  <ul v-for="(item, index) in $parent.items" :key="index">
    <li v-if="item.subItems">{{ item.text }}</li>
    <nested-list v-for="subItem in item.subItems" :key="subItem.id" :item="subItem"></nested-list>
  </ul>
</template>

最后，在`App.vue` 主组件中使用这两个组件:

<template>
  <div>
    <nav-item v-for="(item, index) in items" :key="index" :item="item" />
    <nested-list v-model="items" :root-item="items[0]" />
  </div>
</template>

<script>
import NavLink from './NavItem.vue';
import NestedList from './NestedList.vue';

export default {
  components: {
    NavLink,
    NestedList
  },
  data() {
    return {
      items: [
        // 初始化数据
      ]
    };
  }
};
</script>

现在，当你点击导航菜单项时，对应的二级菜单会被显示或隐藏。Vue 3提供了一种声明式的语法，使得状态管理更为直观。

在vue组件中做陶瓷三级页面

在Vue.js中创建一个三级菜单（也称为嵌套菜单或多级导航）通常涉及到组件化的设计思路。首先，你需要定义几个基础组件：

1. **MenuItem** 或 **NavLink** 组件：这是一个简单的链接组件，用于表示一级菜单项。

<template>
  <a :href="item.href" @click.prevent="handleClick">
    {{ item.label }}
  </a>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    handleClick() {
      // 可能需要跳转路由或其他操作
    }
  }
}
</script>

2. **Submenu** 组件：用于包裹二级和三级菜单，它会递归渲染MenuItem。

<template>
  <li>
    <span v-if="item.label">{{ item.label }}</span>
    <ul v-for="(child, index) in item.children" :key="index">
      < submenu v-bind:item="child" />
    </ul>
  </li>
</template>

3. **NavMenu** 或 **SideBar** 组件：顶级菜单组件，包含所有的MenuItem和Submenu实例。

<template>
  <div>
    <nav>
      <!-- 使用循环遍历一级菜单 -->
      < menu-item v-for="item in mainItems" :item="item" />
    </nav>
    <side-bar :main-items="mainItems" />
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue';
import Submenu from './Submenu.vue';

export default {
  components: { MenuItem, Submenu },
  data() {
    return {
      mainItems: [
        // 你的顶级菜单数组
      ]
    };
  }
};
</script>

在这个结构中，当你点击一级菜单时，对应的二级和三级菜单就会显示出来。要实现动态加载数据，你可以考虑使用Vuex或`async/await`从API获取数据。