D
D
Devero972020-12-09 01:34:47
Express.js
Devero97, 2020-12-09 01:34:47

How to render pages dynamically at the same level (nuxt)?

I have 3 different dynamic pages. Each has different information and has different functions (one has comments, another has tags, etc.). The task is that I need to display them without any additional words in the address bar. The request should be the same for all 3 dynamic pages domain/one of the pages. I don't want to add something like this domain/article/article title. How to solve this problem?
Code:

Tags Component:

<template>
                <div class="search_content_main_item_links">
                    <a v-for="tag in tags" :key="tag._id" @click="openTag(tag.tag)">{{tag.name}}</a>
                </div>
</template>

<script>
export default {
    props: {
        tags: {
            type: Array,
            required: true
        }
    },
    methods: {
        openTag(tag) {
            console.log(tag);
            this.$router.push(`/${tag}`)
        }
    }
}
</script>
// Его динамическая страница
<template>
    <div>
blabla
    </div>
</template>

<script>
export default {
    async asyncData({store, params}) {
        console.log(params.tag);
        const tag = await store.dispatch('tag/fetchById', params.tag)
        return {tag}
    },
}
</script>
// Его store (у меня нет стейта, я использовал только экшны)
export const actions = {
    async fetch({commit}) {
        try {
            return await this.$axios.$get('/api/tag/')
        } catch(e) {
            commit('setError', e, {root: true})
        }
    },
    async createTags({commit}, formData) {
        try {
            return await this.$axios.$post('/api/tag/admin', formData)
        } catch(e) {
            commit('setError', e, {root: true})
        }
    },
    async fetchById({commit}, tag) {
        try {
            return await this.$axios.$get(`/api/tag/${tag}`)
        } catch(e) {
            commit('setError', e, {root: true})
            throw e
        }
    },
}

The other two pages differ only in the transfer and processing of more requests:
// В сторе только больше запросов, нет стейта. В беке я получаю комменты. Тоже самое и для постов.
    async asyncData({store, params}) {
        const card = await store.dispatch('card/fetchById', params.card)
        await store.dispatch('card/addView', card)
        console.log(card);
        return {card}
    },

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey, 2020-12-09
@Devero97

You can try to get all 3 types of entities on one page. On this page, based on the logic of division into entities, make a request (on some hook) of the form: does entity A have such a page
? .

D
dicem, 2020-12-09
@dicem

If you have something that regulates which of these three entities will be displayed on the screen, then you can store this information in the store, and then check the store and display these entities on one page, and transfer comment tags, etc. to components.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question