TODO Detail page & complete mutil breadcrumb

src/components/Breadcrumb/index.vue

   },
   methods: {
     getBreadcrumb() {
+      console.log(this.$route.matched)
       let matched = this.$route.matched.filter(item => item.name)
+      
       const first = matched[0]
       if (first && first.name !== 'dashboard') {
         matched = [{ path: '/dashboard', meta: { title: '首頁' }}].concat(matched)

src/router/index.js

     children: [
       {
         path: 'dashboard',
+        name: 'dashboard',
         component: _import('dashboard/index'),
         meta: {
           title: '首頁',
           title: '每局紀錄',
           icon: 'form'
           // role: ['dd']
-        }
+        },
+        children: [
+          {
+            path: '/gambleGameBucket/index/detail',
+            name: 'GambleGameBucketDetail',
+            component: _import('gambleGameBucket/gambleGameBucketDetail/index'),
+            hidden: true,
+            meta: {
+              title: '詳細紀錄'
+              // role: ['dd']
+            }
+          }
+        ]
       }
     ]
   },

src/views/gambleGameBucket/gambleGameBucketDetail/index.vue

+<template>
+  <div class="app-container">
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column label="ID">
+        <template slot-scope="scope">
+          {{scope.row.id}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="GambleMember.name" label="莊家" width="200" align="center">
+        <!-- <template slot-scope="scope">
+          <span>{{scope.row.GambleMember.id}}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column align="center" label="時間" width="200">
+        <template slot-scope="scope">
+          <span>{{scope.row.createdAt}}</span>
+        </template>
+      </el-table-column>
+       <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <router-link to="/gambleGameBucket/index/detail">
+            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查看</el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/gambleGameBucket'
+
+export default {
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: null,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        importance: '',
+        title: '',
+        type: '',
+        chipsSort: '',
+        updatedSort: ''
+      },
+      temp: {
+        id: '',
+        importance: 1,
+        name: '',
+        chips: '',
+        depositChips: ''
+      },
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    }
+  }
+}
+</script>

src/views/gambleGameBucket/index.vue

       </el-table-column>
        <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="handleDialog(scope.row)">查看</el-button>
+          <router-link to="/gambleGameBucket/index/detail">
+            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查看</el-button>
+          </router-link>
         </template>
       </el-table-column>
     </el-table>
       </el-pagination>
     </div>
 
-    <el-dialog title="詳細" :visible.sync="dialogVisible">
+    <!-- <el-dialog title="詳細" :visible.sync="dialogVisible">
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
       style="width: 100%">
       <el-table-column label="ID">
         </template>
       </el-table-column>
       <el-table-column prop="GambleMember.name" label="莊家" width="200" align="center">
-        <!-- <template slot-scope="scope">
-          <span>{{scope.row.GambleMember.id}}</span>
-        </template> -->
       </el-table-column>
       <el-table-column align="center" label="時間" width="200">
         <template slot-scope="scope">
       <div slot="footer" align="center" class="dialog-footer">
         <el-button type="primary" @click="closeDialog">確 定</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
         chips: '',
         depositChips: ''
       },
-      dialogVisible: false,
-      dialogStatus: ''
+      // dialogVisible: false,
+      // dialogStatus: ''
     }
   },
   created() {
         this.listLoading = false
       })
     },
-    closeDialog() {
-      this.dialogVisible = false
-    },
-    handleDialog(row) {
+    // closeDialog() {
+    //   this.dialogVisible = false
+    // },
+    handlePage(row) {
       this.temp = Object.assign({}, row) // copy obj
+      // router.push({ path: '/gambleGameBucket/index/detail' })
       this.dialogVisible = true
     },
     handleFilter() {