How to change data depending on route in vue?

Question

JavaScript

The essence of the problem is this. The site is designed to display information on 3 categories (I will call them conditionally - item). For example, site.com/item1 displays a selection of information for this item, site.com/item2 and site.com/item3 do the same for themselves. All item1,item2,item3 routes use one component to display home.vue (the main page for them must be identical, information from the server with a selection of goods is loaded onto it).
There is already a certain problem, but I solved it through vuex-router-sync like this:
router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import aboutItem from './views/aboutItem';
import pushPage from './views/pushPage';
import errorPage from './views/error-404';
import home from './views/home';

const routes = [
  {
    path: '/item1',
    name: 'item1',
    component: home,
  },
  {
    path: '/item2',
    name: 'item2',
    component: home,
  },
  {
    path: '/item3',
    name: 'item3',
    component: home,
  },
  {
    path: '',
    name: 'redirect',
    redirect: {
      path: '/'
    },
  },
  {
    path: '*',
    name: 'error-404',
    component: errorPage,
  },
];

export const router = new VueRouter({
  routes,
  mode: 'history'
});

store.js (vuex)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    url: {
      item1: 'item1',
      item2: 'item2',
      item3: 'item3',
    },
    content: 'Hello,  ',
  },
  getters: {
    getContent(state) {
      if (state.route.name === state.url.item1) {
        return state.content + 'item1';
      }
      else if (state.route.name === state.url.item2) {
        return state.content + 'item2';
      }
      else if (state.route.name === state.url.item3) {
        return state.content + 'item3';
      }
    }
  }
});

In home.vue, I simply output data from the vuex storage through computed.

Everything works, the content shows the right one, but a problem appears.
There are the same products that are shown on the main page and there is detailed information about them that should be contained in the aboutItem.vue component and their route, respectively, should be, for example, such site.com/item1/about-item/123
Accordingly, for each category have their own products (on the main page) and there is a page with a description of this product.
Here's how (example)

site.com/item1/about-item/123
site.com/item2/about-item/456
site.com/item3/about-item/789

I tried to make child routes in the routes, but then all the aboutItem.vue content will be shown inside the home.vue component and the path tracking in store.js no longer works, and the site navigation stops highlighting the active link.

How to organize everything so that you can see the information about the product in each of the categories without rendering home.vue? The problem is that there will also be personal pages for categories (maybe there are addresses, information about the company, etc.) and how to do all this is not yet clear.
I hope I explained everything clearly, I tried to paint everything in detail and clearly. I'm a newbie and would appreciate any information.

Answer 1

const routes = [
  {
    path: '/:id/about-item/:id2',
    name: 'about-item',
    component: aboutItem,
  },{
    path: '/:id',
    name: 'item',
    component: home,
  }
]

There is no point in doing the same thing. Distinguish by route.params.