Uncaught error missing param when using named router-link - vue-router

Question

I am following a YouTube course, and I encountered an error on the last part where I added a button for the EditClient route. I'm getting an Uncaught (in promise) Error: Missing required param "id".
router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/dashboard/Dashboard.vue'
import MyAccount from '../views/dashboard/MyAccount.vue'
import SignUp from '../views/SignUp.vue'
import Login from '../views/Login.vue'
import Clients from '../views/dashboard/Clients.vue'
import Client from '../views/dashboard/Client.vue'
import AddClient from '../views/dashboard/AddClient.vue'
import EditClient from '../views/dashboard/EditClient.vue'
import EditTeam from '../views/dashboard/EditTeam.vue'
import Invoices from '../views/dashboard/Invoices.vue'
import Invoice from '../views/dashboard/Invoice.vue'
import AddInvoice from '../views/dashboard/AddInvoice.vue'
import store from '../store'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/sign-up',
name: 'SignUp',
component: SignUp
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/invoices',
name: 'Invoices',
component: Invoices,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/invoices/add',
name: 'AddInvoice',
component: AddInvoice,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/invoices/:id',
name: 'Invoice',
component: Invoice,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/clients',
name: 'Clients',
component: Clients,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/clients/add',
name: 'AddClient',
component: AddClient,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/clients/:id',
name: 'Client',
component: Client,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/clients/:id/edit',
name: 'EditClient',
component: EditClient,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/my-account',
name: 'MyAccount',
component: MyAccount,
meta: {
requireLogin: true
}
},
{
path: '/dashboard/my-account/edit-team',
name: 'EditTeam',
component: EditTeam,
meta: {
requireLogin: true
}
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireLogin) && !store.state.isAuthenticated) {
next('/login')
}
else {
next()
}
})
export default router
My router link is as follows:
<router-link :to="{ name: 'EditClient', params: { id: client.id }}" class="button is-light mt-4">Edit</router-link>
I have tried, and it works:
<router-link :to="'/dashboard/clients/' + client.id + '/edit'" class="button is-light mt-4">Edit</router-link>
answer by Pylinux from this question.
Although the solution is already acceptable, I would like to know why this is happening in my case.