vue3前端请求后端接口动态渲染菜单

在Vue 3中，你可以使用组合式API（Composition API）来实现动态渲染菜单。以下是一个简单的例子，展示了如何根据从后端接口获取的数据来动态生成菜单：

<template>
  <div>
    <nav>
      <ul>
        <li v-for="menuItem in menuItems" :key="menuItem.name">
          <router-link :to="menuItem.path">{{ menuItem.name }}</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const menuItems = ref([]);
 
    const fetchMenu = async () => {
      try {
        const response = await axios.get('/api/menu');
        menuItems.value = response.data;
      } catch (error) {
        console.error('An error occurred while fetching the menu:', error);
      }
    };
 
    onMounted(fetchMenu);
 
    return {
      menuItems,
    };
  },
};
</script>

在这个例子中，我们使用了axios来发送HTTP GET请求到后端的/api/menu接口，并在成功获取数据后更新menuItems响应式变量。然后，我们使用v-for指令在模板中遍历menuItems，为每个菜单项创建一个<li>元素，并通过<router-link>组件提供导航链接。

请确保你的后端接口/api/menu能够返回一个数组，其中包含每个菜单项的name和path属性。这个例子假设你已经有了一个Vue 3项目的基础结构和Vue Router的配置。