Wsrtjtyk

I am using Vue.js 2.0, and I have this exact same code in 2 differents files, so I decided to build only one component and redirect the 2 routes on it, then I just need to pass the ID to the route, this way my 2 components can display differents resultats.

Note: the only thing that changes is the ID dsgh151rhj12t1j5j I would like that each route can send it own ID to my PageContentfulView component

EDIT: I just want to pass data from Route to the component

<template>

    <div>

        <div class="container">

            <hp-row>

                <hp-column>

                    <component v-for="component in content.column" :data="component" :key="component.id" :is="getComponentIdentifier(component.is)"></component>

                </hp-column>

            </hp-row>

        </div>

    </div>

</template>



<script>

import ModularView from '@/views/ModularView'



export default {

    name: 'PageContentfulView',

    mixins: [ModularView],



    created () {

        this.fetch('blocks/dsgh151rhj12t1j5j')

    },

}

</script>

Routes:

    {

        path: '/satisfaction-guarantee',

        name: 'SatisfactionView',

        component: load('PageContentfulView'),

    },

    {

        path: '/about-us',

        name: 'AboutUsView',

        component: load('PageContentfulView'),

    },

'props' can solve your problem.

<template>

    <div>

        <div class="container">

            <hp-row>

                <hp-column>

                    <component v-for="component in content.column" :data="component" :key="component.id" :is="getComponentIdentifier(component.is)"></component>

                </hp-column>

            </hp-row>

        </div>

    </div>

</template>



<script>

import ModularView from '@/views/ModularView'



export default {

    name: 'PageContentfulView',

    mixins: [ModularView],

    props: ['id'],

    created () {

        this.fetch('blocks/' + this.id)

    },

}

</script>

route

  {

    path: '/satisfaction-guarantee',

    name: 'SatisfactionView',

    component: load('PageContentfulView'),

    props: { id: 'dsgh151rhj12t1j5j' },

},

{

    path: '/about-us',

    name: 'AboutUsView',

    component: load('PageContentfulView'),

    props: { id: 'blablablabla' },

},

You can do it using Dynamic Route Matching. You just need to include the parameter on the definition of the route, like below:

{

    path: '/satisfaction-guarantee/:ID',

    name: 'SatisfactionView',

    component: load('PageContentfulView'),

}

Inside you component, to access the ID, you just need to use the this.$route.params.ID.

Passing props to route component allows an object mode.

Example from the documentation:

const router = new VueRouter({

  routes: [

    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }

  ]

})

Route meta fields

Also you always can use the meta property to pass extra data (like a requireAuth flag)

const router = new VueRouter({

  routes: [

    { path: '/test', component: TestComponent, meta: { someBoolean: false } }

  ]

})

And you can access it within your component

created() {

  let meta = this.$route.meta;

}

Set the props in your route to true and place /:id at the end of your path

  const router = new VueRouter({

       routes: [

        { path: '/promotion/from-newsletter/:id',

          component: Promotion, 

          props: true

          }

          ]

        })

You can now extract the param id of your route from the props in the corresponding component

<template>

    <div>

        <div class="container">

            <hp-row>

                <hp-column>

                    <component v-for="component in content.column" :data="component" :key="component.id" :is="getComponentIdentifier(component.is)"></component>

                </hp-column>

            </hp-row>

        </div>

    </div>

</template>



<script>

import ModularView from '@/views/ModularView'



export default {

    name: 'PageContentfulView',

    mixins: [ModularView],

    props: ['id'],

    created () {

        this.fetch('blocks/'+id)

    },

}

</script>