Why does navigating to a route with a parameter result in the modification of all routes in the HTML?

[cris-m]

I have the following in router index.js folder:

const routes = [
  {
    path: '/',
    alias: '/home',
    name: 'home',
    meta: {
        title: 'menu.links.home',
        requiresAuth: true,
        layout: MainLayout
    },
    component: () => import('@/views/HomeView.vue')
  },

  {
    path: '/key_logs/:id',
    name: 'key_logs',
    meta: {
        title: 'menu.links.account',
        requiresAuth: true,
        layout: MainLayout
    },
    component: () => import('@/views/APIKeyLogView.vue')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  strict: true,
});

router.beforeEach((to, from, next) => {
    const isAuthenticated = store.getters['auth/isAuthenticated'];
    const isAdministrator = store.getters['user/isAdministrator'];

    if (to.meta.requiresAuth && !isAuthenticated) {
        // If the route requires authentication and the user is not authenticated,
        // redirect to the login page.
        next({ name: 'login', query: {} });
    } else if (isAuthenticated && (to.name === 'login' || to.name === 'registration')) {
        // If the user is already authenticated and trying to access the login or registration page,
        // redirect to the home page.
        next({ name: 'home' });
    } else if (to.meta.requiresAuth && to.meta.layout === ManagementLayout && !isAdministrator) {
        // If the route requires authentication and has ManagementLayout but the user is not an admin,
        // redirect to the home page.
        next({ name: 'home' });
    } else {
        // If the route does not require authentication or the user is authenticated and trying to access a route that doesn't require authentication,
        // allow the navigation to continue.
        next();
    }
});

And the following view:

<template>
<div>
<router-link to="home">Home</router-link>
<router-link :to="{ name: 'key_logs', params: { id: "6c883623-a70c"} }" >View Logs</router-link>
</div>
</template>
<script>
export default({
    name: 'TestView',
    setup() {}
})
</script>

And here is the log view:

<template>
<div>
<p>Log</p>
</div>
</template>
<script>
import { useRoute } from 'vue-router';
export default({
  name: 'LogView',
  setup() {
    const route = useRoute();
    console.log(route.params.id);
  }
})
</script>

Why does clicking the 'View Logs' link change the /home route to /key_logs/home, and why do all routes in the view get updated with /key_logs/ added at the beginning? I'm looking for assistance in understanding this behavior.