Vue3: Uncaught (in promise) Error: Missing required param "c_id"

Question

Before I change the path into "edit/:c_id" everything working fine, but after that I got the error: enter image description here Associated block with that change as following:

Route.ts:

            {
                path: 'edit/:c_id',
                name: 'cat.edit',
                meta: {notHistory: true},
                component: () => import('@/views/cat/edit.vue')
            }

Index.vue(the problem file):

<template>
<main class="catIndex">
  <div class="body" v-if="cats">
    <div class="item" v-for="(item,index) in cats" :key="index">
      <el-card shadow="hover">
        <el-image :src="item.preview" :fit="fit" class="rounded"/>
        <div class="title">{{item.title}}</div>
        <div class="buttons">
          <el-button type="success" @click="$router.push({name:'cat.edit',params:{c_id:item.id}})"><icon-editor/>&nbsp;Modify</el-button> // * The problem line
          <el-button type="danger"><icon-delete/>&nbsp;Delete</el-button>
        </div>
      </el-card>
    </div>
  </div>
</main>
</template>

It's so strange, if the path in Route.ts is 'edit' everything just fine, and I've been reviewed much times, it seems just the problem line associated with that error report. Please help me, I am crazy now.

After trying, I got less but new error as follows: enter image description here

I've "solved" the problem now, I using "query" tag to transmit data instead "params" and it did work as I expected, but I'm still confused about the problem here end up :(