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

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

您可以使用 Dynamic Route Matching 来完成。您只需要在路由定义中包含参数，如下所示：

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

在您的组件内部，要访问 ID，您只需使用 this.$route.params.ID。

Answer 2

'props'可以解决您的问题。

<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 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
          }
          ]
        })

您现在可以从相应组件的 props 中提取路由的参数 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 有没有办法将数据从路由传递到组件？

Vue is there a way to pass data from route to component?

vue.js

vue-router

vuejs2

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

Route meta fields