[Vuejs]-Vue-router 404 errors for paths that exist but do not have an associated record

by

1👍

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
  }
}
👤yoduh

Leave a comment