How to redirect to a 404 page in vue if the server returned a 404?

Question

Frontend

Hello!
How to redirect user to 404 error page.

I have routes like this

{
        path:"/catalog/:catalog",
        name: 'products',
        component: () => import('./views/products.vue')
    },
    {
        path:"/:pathMatch(.*)*",
        name: '404',
        component: () => import('./views/pagenotfound.vue')
    }

And such an action in vuex

ajaxProductsbyCategoryFromDB(context,category){
            axios.get("/api/products/"+category).then(responce =>{
                context.commit('setProducts',responce.data.products)
            })
            // .catch(Что-то тут надо сделать?)
        }

It turns out that the first route is being processed, where the data request occurs in the component. If the request to the backend returns 404 (it returns when necessary), then you need to somehow return the 404 page to the user. How can this be done?

Answer 1

ajaxProductsbyCategoryFromDB(context,category){
            axios.get("/api/products/"+category).then(responce =>{
                context.commit('setProducts',responce.data.products)
            })
            .catch((error) => {
              // Проверка на код ошибки
              if (error.response.status === 404) {
                // Перенаправление на именованный роут
                router.push({ name: '404' })
              }
            })
        }