Vue есть способ передачи данных от маршрута к компоненту?

Question

Я использую Vue.js 2.0, и у меня точно такой же код в двух разных файлах, поэтому я решил собрать только один компонент и перенаправить на него 2 маршрута, тогда мне просто нужно передать идентификатор в маршрутТаким образом, мои 2 компонента могут отображать разные результаты.

Примечание: изменяется только идентификатор dsgh151rhj12t1j5j Я бы хотел, чтобы каждый маршрут мог отправить свой идентификатор на мой PageContentfulView компонент

РЕДАКТИРОВАТЬ: я просто хочу передать данные из маршрута в компонент

<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>

Маршруты:

    {
        path: '/satisfaction-guarantee',
        name: 'SatisfactionView',
        component: load('PageContentfulView'),
    },
    {
        path: '/about-us',
        name: 'AboutUsView',
        component: load('PageContentfulView'),
    },

Answer 1

Установите реквизиты в вашем маршруте на true и поместите /:id в конце вашего path

  const router = new VueRouter({
       routes: [
        { path: '/promotion/from-newsletter/:id',
          component: Promotion, 
          props: true
          }
          ]
        })

Теперь вы можете извлечь параметр id вашего маршрута из реквизитав соответствующем компоненте

<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>

Answer 2

«реквизит» может решить вашу проблему.

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

Answer 3

Передача реквизита в компонент маршрута допускает режим объекта.

Пример из документации :

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

Мета-маршрутполя

Также вы всегда можете использовать свойство meta для передачи дополнительных данных (например, флаг requireAuth)

const router = new VueRouter({
  routes: [
    { path: '/test', component: TestComponent, meta: { someBoolean: false } }
  ]
})

И вы можете получить к ним доступ в своем компоненте

created() {
  let meta = this.$route.meta;
}

Answer 4

Вы можете сделать это, используя Dynamic Route Matching .Вам просто нужно включить параметр в определение маршрута, как показано ниже:

{
    path: '/satisfaction-guarantee/:ID',
    name: 'SatisfactionView',
    component: load('PageContentfulView'),
}

Внутри вашего компонента, чтобы получить доступ к ID, вам просто нужно использовать this.$route.params.ID.