vue-router 404 errors for paths that exist but do not have an associated record

My project is using vue-router and I am looking for a good way to handle 404 errors for paths that exist in my routes.js but doesn't have an associated record.

For example if someone visits:

https://localhost/tutorials/how-to-train-a-chimpanzee

The router finds the tutorials/:slug but after we query the api the results come back with 404.

What I would like to do is have a generic 404 page display and keep the current url.

There is a boat ton of documentation around generic 404s with vue-router. I can't find much about this specific use case. Any guidance would be appreciated.

This below approach is working in our app. The code below is heavily edited so it might contain errors.

src/routers/routes.js

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      {
        name: 'tutorial',
        path: '/tutorials/:slug',
        props: true,
        component: () =>
	      import('pages/Tutorial.vue'),
        }
    ]
  },

  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
]

export default routes

src/store/tutorials/action.js

const show = (context, data) => {
  return new Promise((resolve, reject) => {
    ProfileService.show(data)
      .then((response) => {
        context.commit('tutorials/setModel', { model: e.tutorial })
        // Do other stuff
        resolve(response)
      })
      .catch((error) => {
        console.log(error)
        reject(error)
      })
  })
}

src/pages/Tutorial.vue

const fetchData = () => {
	store.dispatch('tutorials/show', { slug: route.params.slug })
	.then(response => {
		// do more stuff
	})
	.catch(error => {
		router.push('/error-404')
	})
}

What I do is fetch my data in a beforeEnter guard. If the return value indicates the data does not exist, I reroute to a different page (home page, 404 page, etc.). Otherwise navigation continues, at which point my store also already has the data it needs and the component no longer needs to call the fetch itself.

{
  name: 'tutorial',
  path: '/tutorials/:slug',
  props: true,
  beforeEnter: async (to) => {
    const route = await store.dispatch('tutorials/show', { slug: to.params.slug })
      .then((res) => {
        if (res.data) return true; // continue navigation
      })
      .catch(() => {
        return { path: "/error-404" };
      });
    return route
  }
}