在vue3项目中根据router中的route动态生成对应数量的button

在 Vue 3 项目中，根据路由配置中的数据动态生成按钮通常涉及到组件内的计算属性和模板动态渲染。下面是一个基本的例子：

首先，假设你的路由对象中有一个数组，这个数组表示了每种按钮的不同状态，比如有不同的路由链接或者每种按钮对应不同的功能：

export default {
  data() {
    return {
      buttonsData: [] // 从路由获取的数据，例如：[{'link': '/item1', 'text': 'Item 1'}, {'link': '/item2', 'text': 'Item 2'}]
    };
  },
};

在模板部分，你可以使用 `v-for` 循环遍历这个数组，并生成对应的按钮：

<template>
  <div>
    <button v-for="(btn, index) in buttonsData" :key="index">
      {{ btn.text }}
      <!-- 如果需要跳转，可以用router-link -->
      <router-link :to="btn.link">{{ btn.text }}</router-link>
    </button>
  </div>
</template>

当你在路由发生变化时，如果按钮数据也相应更新，记得使用响应式数据和监听 `$route` 或者手动刷新页面来触发组件的重新渲染。例如，如果你在 `beforeRouteUpdate` 或者 `mounted` 生命周期钩子中获取最新的路由数据并更新 `buttonsData`，那么按钮就会自动更新。