У меня есть 3 разные динамических страницы. Каждя имеет разную информацию и имеет в себе различные функции(у одной комментарии, у другой теги и т.д.). Задача в том, что мне нужно выводить их без каких либо дополнительных слов в адресной строке. Запрос должен быть такой у всех 3 динамических страниц домен/одна из страниц. Я не хочу добавлять что-то вроде этого домен/статьи/название статьи. Как решить эту проблему?
Код:
Компонент тегов :
<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
}
},
}
У остальных двух страницах отличие лишь в передаче и обработке большего количества запросов:
// В сторе только больше запросов, нет стейта. В беке я получаю комменты. Тоже самое и для постов.
async asyncData({store, params}) {
const card = await store.dispatch('card/fetchById', params.card)
await store.dispatch('card/addView', card)
console.log(card);
return {card}
},
Средний
