Question

我使用的是Vue.js 2.0，在2个不同的文件中有相同的代码，因此我决定只构建一个组件并重定向其中的2条路线，然后只需要将ID传递给路线，这样我的2个组件可以显示不同的结果。

注意：唯一更改的是ID dsgh151rhj12t1j5j ，我希望每条路由都可以将其自己的ID发送给我的 PageContentfulView 组件

编辑：我只想将数据从Route传递到组件

<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

“道具”可以解决您的问题。

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

路线

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

Answer 2

您可以使用Dynamic Route Matching进行操作。您只需要在路线的定义中包括参数，如下所示：

^(?:(?!\1)a()|(?!\2)a()|(?!\3)b()|(?!\4)b()|(?!\5)c()|(?!\6)c()){6}$

在组件内部，只需访问{ path: '/satisfaction-guarantee/:ID', name: 'SatisfactionView', component: load('PageContentfulView'), }，即可访问ID。

Answer 3

Passing props to route component允许对象模式。

Example from the documentation：

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

Route meta fields

此外，您始终可以使用meta属性传递额外的数据（例如requireAuth标志）

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

您可以在自己的组件中访问它

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

Answer 4

将路线中的道具设置为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>

Vue有没有办法将数据从路线传递到组件？

4 个答案:

Passing props to route component允许对象模式。

Route meta fields