如何显示多个视图获取数据

Question

我需要在点击时显示特定条目的额外信息，但在屏幕上保留其他条目。

在这些图形中，灰色代表＆＃34;默认＆＃34;有关条目的信息，红色代表＆＃34;扩展的＆＃34;有关参赛作品的信息。

＆＃34;扩展＆＃34;信息需要在显示之前获取数据，因此我无法使用v-if或active类。

www.example.com /

www.example.com/1

www.example.com/3

我尝试了多个named views，但没有做出预期的事情，看起来好像是not meant to do stuff like this。

这些是我现在的简单代码。我不确定从哪里开始。 router-link是一种选择吗？

const Entry = {
    template: '<div>Entry ID {{ $route.params.id }}</div>'
};

const router = new VueRouter({
    routes: [
        {
            path: '/:id',
            component: Entry
        }
    ]
});

Answer 1

您可以创建一个父组件Entries，它将负责列出Entry组件，并将道具传递给Entry，指示它是否应该获取数据。使用vue-cli，它会看起来像这样：

<强> Entries.vue

<template>
    <entry
        v-for="entry of entries"
        :fetchData="(entry.id === $route.params.id)"
        :entry="entry"
    ></entry>
</template>

<script>
    import Entry from './path/to/Entry.vue'

    export default {
        components: {
            Entry,
        },

        data() {
            return {
                entries: [], // Array with entries data
            }
        },
    }
</script>

<强> Entry.vue

<template>
    <div>{{ entry }}</div>
</template>

<script>
    export default {
        props: ['fetchData', 'entry'],

        mounted() {
            // do some fetching magic if this.fetchData === true
        }
    }
</script>

VueRouter应该呈现Entries而不是Entry。如果您想要获取多个Entry组件，请考虑使用$route.query代替$route.params.id。