can someone help me?
I have such a dynamic page
on the host the page opens upon click, but after the refresh I get 404
pages/blog/[slug].vue
<script setup>
import { useBlogStore } from '@/store/blog-store';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const blogStore = useBlogStore();
const article = computed(() => blogStore.articles.find(a => a.slug === route.params.slug));
const newArticle = ref(null);
const loading = ref(false);
onMounted(() => {
getData();
});
const getData = () => {
loading.value = true;
console.log(route.params.slug);
blogStore.fetchArticle(window.location.pathname.replace(/^/blog//, '')).then((res) => {
newArticle.value = res;
}).catch((error) => {
console.error('Error fetching article:', error);
}).finally(() => {
loading.value = false;
});
};
store
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { useApi } from '@/boot/axios2.js';
export const useBlogStore = defineStore('blog', () => {
const { api } = useApi();
const newArticles = ref([]);
const articles = ref([]);
const fetchArticle = async (slug) => {
try {
const response = await api.get(`blog/entry/${slug}`);
return response.data;
} catch (error) {
throw error;
}
};
return {
newArticles,
articles,
fetchArticle
};
});
The page address does not change but the page does not open after refresh.
In my localhost everything works without problems too
New contributor
Miqayel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.