element plus 单选框 设置多个按钮跳转 绑定路由页面对应的地址

Element Plus 是 Vue 3 的一套基于 Vue 2.x 的 UI 组件库，它提供了丰富的交互组件，包括单选框 (`el-radio`)。如果你想通过多个单选按钮设置跳转，并绑定不同的路由页面，可以按照以下步骤操作：

1. 安装 Element Plus 和 Vue Router：首先确保已安装了 Vue CLI，然后运行 `npm install element-plus vue-router` 或者使用 Yarn 进行安装。

2. 创建路由：在项目根目录下的 `src/router` 文件夹里创建 `.js` 文件，配置路由数据，例如：

   import { createRouter, createWebHistory } from 'vue-router';
   const routes = [
     { path: '/route1', component: Route1Component },
     { path: '/route2', component: Route2Component },
     // 添加其他路由...
   ];
   const router = createRouter({
     history: createWebHistory(), // 使用 HTML5 History API
     routes,
   });

3. 创建单选按钮组件：每个单选按钮对应一个路由，可以使用模板和事件来绑定选择事件：

   <template>
     <div>
       <el-radio v-model="selectedRoute" @change="handleChange">
         <router-link :to="{ name: 'route1' }">路由 1</router-link>
       </el-radio>
       <el-radio v-model="selectedRoute" @change="handleChange">
         <router-link :to="{ name: 'route2' }">路由 2</router-link>
       </el-radio>
       <!-- 添加更多单选按钮... -->
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         selectedRoute: null, // 初始化为第一个路由
       };
     },
     methods: {
       handleChange路线名) {
         this.$router.push({ name: 路由名 }); // 当单选按钮切换时，导航到相应的路由
       }
     }
   };
   </script>

4. 在需要的地方引入并使用这个组件。