Why doesn't the router load pages with different ids?

Question

Vue.js

When I click on the '/products/1' category link (link1) the page loads, but when I click to go to another category (link2) the url changes but the page stays the same.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Products from './components/products/ProductList';
Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/products/:id', name: 'products', component: Products},
    ],
});
export default router;

AppComponent.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

ProductsComponent.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <categories-list></categories-list> //Сюда подгружаются категории(ссылки)
      </div>
    </div>
  </div>
</template>

CategoryList.vue

<template>
  <ul class="list-group">
    <li class="list-group-item-action list-group-item" v-for="(category, index) of categories" :key="index">
      <router-link :to="{ name: 'products', params: { id: category._id }}">{{ category.name }}</router-link>
    </li>
  </ul>
</template>

Answer 1

Read the documentation first, and then ask questions.