Как менять данные в зависимости от route в vue?

Question

[DeNick]

Суть проблемы такая. Сайт предназначен для вывода информации по 3м категориям (назову их условно - item). К примеру, site.com/item1 выводит выборку информации под этот item, site.com/item2 и site.com/item3 делают тоже самое под себя. Все роуты item1,item2,item3 используют один компонент для вывода home.vue (главная страница для них должна быть идентична, на неё подгружается информация от сервера с подборкой товаров).
Тут уже возникает некая проблема, но я её решил через vuex-router-sync вот так:
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';
			}
		}
	}
});

В home.vue просто через computed вывожу данные из хранилища vuex

Всё работает, контент нужный показывает, но вот появляется проблема.
Есть те самые товары, которые показываются на главной и о них есть подробная информация, которая должна содержаться в компоненте aboutItem.vue и роут у них соответственно должен быть к примеру такой site.com/item1/about-item/123
Соответственно, под каждую категорию есть свои товары (на главной) и есть страница с описанием этого товара.
Вот как нужно (пример)

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

Я в роутах пытался сделать дочерние роуты, но тогда весь контент aboutItem.vue будет показываться внутри компонента home.vue и отслеживание пути в store.js уже не работает, ну и навигация по сайту перестаёт выделять активную ссылку.

Как всё организовать, что бы можно было посмотреть информацию о товаре в каждой из категорий без отрисовки home.vue? Проблема ещё в том, что для категорий будут ещё персональные страницы (может там адреса, информация о компании и тд) и как всё это сделать, пока не понятно.
Надеюсь объяснил понятно, старался всё расписать подробно и понятно. Сам новичок и буду рад любой информации.

Answer 1

[Aetae]

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

Нет смысла делать одно и тоже. Различать по route.params.

Comments

[DeNick]

Спасибо, действительно помогло)