vue3 获取后台数据生成动态路由示例 详情页的路由配置

在Vue3中，获取后台数据并动态生成路由通常发生在组件初始化阶段或者是需要根据用户登录状态或数据变化更新路由的时候。以下是一个简单的示例，展示了如何在`setup`函数中通过axios请求获取数据，并基于返回的数据动态配置路由：

<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import router from './router' // 假设你的router已经导入

const fetchData = async () => {
  const response = await axios.get('/api/data') // 按实际API地址替换
  const data = response.data

  // 根据数据结构更新动态路由
  if (data) {
    data.forEach(item => {
      router.addRoute({
        path: `/item/${item.id}`, // 使用item.id作为路径的一部分
        name: 'ItemDetail',
        component: () => import('./views/ItemDetail.vue'), // 引入对应的详细页面组件
      })
    })
  }
}

onMounted(fetchData)
</script>

在这个例子中，当页面加载完成后，`fetchData`函数会被调用，它会向服务器获取数据。如果数据存在，我们遍历数据并将每个条目的ID添加到路由表中，设置相应的路由路径、名称以及组件引用。