elementui 实现12个卡片，每行5个，每个卡片的上面放置图片下面放置文字。点击卡片可以用vue-router实现跳转页面

Element UI是一个流行的前端UI库，用于Vue.js框架快速构建用户界面。要实现你描述的布局，我们可以结合`el-row`, `el-col`（栅格系统），`el-card`（卡片组件）以及`router-link`（Vue Router的链接组件）。以下是基本的步骤：

1. 首先，在你的Vue文件中安装并引入Element UI及Vue Router，如果你还没有安装，可以这样做：

   npm install element-ui vue-router

2. 引入样式：

   <link rel="stylesheet" href="path/to/element-ui/lib/theme-chalk/index.css">

3. 使用组件注册：

   import { ElRow, ElCol, ElCard, routerLink } from 'element-ui';
   import VueRouter from 'vue-router';

   // 如果没注册，记得添加
   Vue.use(ElementUI);
   Vue.use(VueRouter);

4. 定义数据结构，假设我们有12张卡片的数据：

   const cards = [
     { img: 'path/to/image1', title: '卡片1内容' },
     ... (9 more cards)
   ];

5. 创建模板：

   <template>
     <div>
       <el-row :gutter="20">
         <!-- 循环cards数组 -->
         <el-col :span="5" v-for="(card, index) in cards" :key="index">
           <el-card @click="goToPage(card)">
             <img :src="card.img" alt="" class="card-img">
             <div class="card-body">
               <h3>{{ card.title }}</h3>
               <!-- 可选，如果需要更多文本 -->
               <!-- <p>更多详细信息</p> -->
             </div>
           </el-card>
         </el-col>
       </el-row>
     </div>
   </template>

6. 定义路由跳转函数`goToPage`：

   methods: {
     goToPage(card) {
       this.$router.push({
         path: '/detail', // 跳转到详情页的路径
         query: { id: card.id || card.title }, // 传递卡片标识以便在详情页接收
       });
     }
   },

7. 最后，配置Vue Router:

   const routes = [
     {
       path: '/detail/:id',
       component: DetailComponent, // 这里替换为你的详情页组件
       name: 'Detail',
     },
     ...其他路由...
   ];

   const router = new VueRouter({
     routes,
   });

   // 在main.js中实例化并挂载路由
   new Vue({
     router,
     ...其它配置...
   }).$mount('#app');