Why not the router loads the page with different id?

Hi all.
I have this problem:
When you click on a link categories '/products/1' (link1), the page loaded but when I click to go to another category (link2) - the url changes but the page remains 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>
the <div>
the <router-view></router-view>
</div>
</template>


ProductsComponent.vue
<template>
 <div class="container">
 <div class="row">
 <div class="col-lg-3">
 <categories-list></categories-list> //Here loaded categories(links)
</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>


5b4eff3c9dda5016337178.png5b4eff2bcd41f096376907.png
June 3rd 19 at 21:06
1 answer
June 3rd 19 at 21:08
Solution
The documentation is first read and then ask questions.

Find more questions by tags JavaScriptVue.js