Vue, what are the ways to pass an id when a menu item is clicked?

Question

Vue.js

What are the ways to pass id when clicking on a menu item?
other than this
path: '/category/:id'
Using 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>

I don't want to transfer to to tried
this option

{
            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 }
        },

Because here the same CatProducts component is used for 3 routes, catId does not change.
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>

Answer 1

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

Well, or without unnecessary tinsel:
<ListProducts :catId="$route.meta.catId" />

Answer 2

https://css-tricks.com/responsive-data-tables/
The most common and easiest option is to make a wrapper for tables (using jQuery) and a horizontal scroll in it (CSS).

Answer 3

Consideration number one: I want to keep the parallel arrangement of columns, because the user wants not only to read the rates, but also to compare them with each other.
Consideration number two: 4 columns is not so much, in principle they can be packed into a mobile screen, especially if you use abbreviations (month, rub).
I would turn the left column on mobile devices with line headers. Type:

Вид аренды
Посуточно     Посуточно     Помесячно      Помесячно
Оплата агентских услуг
Ежемесячно    3 месяца      Ежемесячно     Единоразово

Probably the easiest way to implement it is to duplicate this information and hide/show the desired copy.

Answer 4

While I was preparing the example, dom1n1k already wrote everything.
https://jsfiddle.net/webirus/jocbkj35/

Answer 5

if you work with bootstrap, do everything on it, simply and quickly, it will adapt for you, you just need to fix small jambs on xs

Answer 6

In theory, it’s not your head that should hurt, but the web designer’s. Let him draw 3-4 layouts of how the table will look in different screen width ranges. For you only the technical implementation of his ideas.

Answer 7

The most correct way is not to compress the table and not change its structure. In the variant proposed by zooks , the scroll area is increased, which is the worst. Firstly, because the structure has changed and the tariffs are simply not comparable anymore. You have to scroll up and down to compare the packages, and in general, turn the stirrup a lot. The most correct way is to compress the table slightly, and then, when it is no longer possible, to show horizontal scrolling for this table.