$router.pushでデーターがうまく渡せません。

Vueを勉強
実現したいこと
メンバー一覧ページから追加でメンバーを登録し、
各行の「詳細」ボタンから「詳細」ページに登録したデーターを渡したい。

解決したいこと
router.push(...)で値を渡しているのですが、
「Cannot read property 'id' of undefined」が表示されてしまい、「詳細」ページにリンクされません。
コードは下記になります。
一覧ページ

  <div>
    <h1>メンバー一覧</h1>
    
    <v-row md="4" class="pa-10">
      <v-col
            cols="12"
            md="4"
          > 
        <v-text-field label="お名前"  hide-details="auto" v-model="name" ></v-text-field>
      </v-col > 
      <v-col
            cols="12"
            md="4"
          > 
      <v-select
          :items="items"
          label="特技"
          v-model="art"
        ></v-select>
      </v-col > 
      <v-col
            cols="12"
            md="4"
          > 
        <v-textarea
              outlined
              name="input-7-4"
              label="記事"
              v-model="content"
              
            ></v-textarea>
      </v-col > 
      <v-col>
        <v-btn class="float-right" small color="primary" @click="add">追加</v-btn>   
      </v-col>
    </v-row>
       
    <v-row class="pa-10">
      <v-col> 
        <v-card
    class="mx-auto"
    color="white"
    width="1820px">
      <template>
        <v-simple-table>
          <template v-slot:default>
            <thead>
              <tr>
                <th>ID</th>
                <th>名前</th>
                <th>特技</th>
                <th>記事</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(list,index) in lists" :key="list.id">
                <td>{{list.id}}</td>
                <td>{{list.name}}</td>
                <td>{{list.art}}</td>
                <td>{{list.content}}</td>
                <!-- <td><router-link :to="`/member/${list.id}`"><v-btn small color="primary">詳細</v-btn></router-link><v-btn small @click="remove(index)">削除</v-btn></td> -->
                <td><v-btn @click="showMember(list.id)" small color="primary">詳細</v-btn><v-btn small @click="remove(index)">削除</v-btn></td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </template>
      </v-card>
      </v-col>
    </v-row>
    
  </div>
  
</template>

<script>
export default {
  data(){
    return{ 
      memberIndex:0,
      name:"",
      art:"",
      items: ['プログラミング', 'デザイン', 'マーケティング',],
      content:"",
      rules: [
        value => !!value || '未入力です.',
        value => (value && value.length >= 8) || '8文字以上',
      ],
      lists:[],
      
    }
  },
  methods:{
    add(){
      
      if(!this.name || !this.art|| !this.content){
        return;
      }

      let max = this.lists.reduce(function(a,b){
        return a > b ? a : b.id
      },0)
      let cut = this.content
      let cutResult = cut.substring(0, 30);
      let fcutResult = cutResult +'...'
      this.lists.push({
        id:max +1,
        name:this.name,
        art:this.art,
        content:fcutResult
      })
      
      this.name ="",
      this.art = "",
      this.content ="",
      this.save();
    },
    remove(index){
      this.lists.splice(index,1);
      this.save();
    },
    save() {
        const parsed = JSON.stringify(this.lists);
        localStorage.setItem('lists', parsed);
    },
    showMember(id){
        
      this.memberIndex = id
      this.$router.push({ 
        name: 'Details', 
        params:{
          id:this.lists[this.memberIndex].id,
          name:this.lists[this.memberIndex].name,
          art:this.lists[this.memberIndex].art,
          content:this.lists[this.memberIndex].content,
        }
      })
    }
    
  },
  mounted() {
      if (localStorage.getItem('lists')) {
          try {
              this.lists = JSON.parse(localStorage.getItem('lists'));
          } catch(e) {
              localStorage.removeItem('lists');
          }
      }
  },
}
</script>

<style lang="scss" scoped>
 
</style>

router.js

import
1import VueRouter from 'vue-router'
2import Home from '../views/Home.vue'
3import Members from '../views/Members.vue'
4import Details from '../views/MemberDetails.vue'
5
6Vue.use(VueRouter)
7
8const routes = [
9  {
10    path: '/',
11    name: 'Home',
12    component: Home
13  },
14  {
15    path: '/members',
16    name:'Members',
17    component: Members
18  },
19  {
20    path:'/member/:id',
21    name:'Details',
22    component: Details,
23    props: route => ({ 
24      id: Number(route.params.id),
25      name:route.params.name,
26      art:route.params.art,
27      content:route.params.content
28    })
29  },
30]
31
32const router = new VueRouter({
33  mode: 'history',
34  base: process.env.BASE_URL,
35  routes
36})
37
38export default router
39

詳細ページ

template>
  <div>
      <p>{{id}}の詳細です</p>
      <p>{{name}}</p>
      <p>{{art}}</p>
      <p>{{content}}</p>
      </div>
</template>

<script>
export default {
    props:{
        id:Number,
        name:String,
        art:String,
        content:String,
    }
}
</script>

<style>

</style>