Vue, какие способы есть для передачи id при клике на пункт меню?

Question

[Константин]

Какие есть способы для передачи id при клике на пункт меню?
кроме этого
path: '/category/:id'

Использую v-list

<v-list-tile to="/ezh" class="myHover">
     <v-icon small>fa-cubes</v-icon>
     <v-list-tile-title>&nbsp;&nbsp;&nbsp;&nbsp;{{ $i18n.t('ehz') }}</v-list-tile-title>
</v-list-tile>
<v-list-tile to="/pipeline" class="myHover">
     <v-icon small>fa-cubes</v-icon>
     <v-list-tile-title>&nbsp;&nbsp;&nbsp;&nbsp;{{ $i18n.t('pipeline') }}</v-list-tile-title>
</v-list-tile>
<v-list-tile to="/safe-tool" class="myHover">
     <v-icon small>fa-cubes</v-icon>
     <v-list-tile-title>&nbsp;&nbsp;&nbsp;&nbsp;{{ $i18n.t('safe-tool') }}</v-list-tile-title>
</v-list-tile>

в to не хочу передавать

пробовал этот вариант

{
            path: '/ehz',
            name: 'Ehz',
            component: () => import('../components/pages/shop/categories/CatProducts'),
            meta: { catId: 1 }
        },
        {
            path: '/pipeline',
            name: 'Pipeline',
            component: () => import('../components/pages/shop/categories/CatProducts'),
            meta: { catId: 2 }
        },
        {
            path: '/safe-tool',
            name: 'SafeTool',
            component: () => import('../components/pages/shop/categories/CatProducts'),
            meta: { catId: 3 }
        },

Т.к. здесь используется один и тот же компонент CatProducts для 3 роутов, catId не меняется.

CatProducts.vue

<template>
<div>
    <SearchProduct />
    <ListProducts :catId = "catId" />
</div>    
</template>

<script>
import ListProducts from '../shared/ListCatProducts'
import SearchProduct from '../shared/SearchProduct'

export default {
    components: {
        SearchProduct,
        ListProducts
    },
    created() {
        this.catId = this.$route.meta.catId;
    }    
}
</script>

Comments

[Владимир]

А чем передача по id не понравилась?

router.js

{
    path: '/:catId',
    name: 'CatProducts',
    component: () => import('../components/pages/shop/categories/CatProducts'),
    props: true
},

CatProducts.vue

<template>
<div>
    <SearchProduct />
    <ListProducts :catId = "catId" />
</div>    
</template>
<script>
export default {
    components: {
        SearchProduct,
        ListProducts
    },
    props: ['catId']
}
</script>

Answer 1

[0xD34F]

computed: {
  catId() {
    return this.$route.meta.catId;
  },
},

Ну или без лишней мишуры:

<ListProducts :catId="$route.meta.catId" />

Comments

[Константин]

Да, точно, что-то я не сообразил, спасибо. )

[alex]

Константин, если ответ решил вашу проблему, его стоит отметить решением