How to properly handle 404 routes with reroute() ?

[fontanaen]

What we're trying to do

When a Post API returns 404, we want to redirect to our catch-all not-found page instead of rendering the Post route.
We also want the 404 page to use the original URL.

// loaders/post-loader.ts
import { reroute } from 'vue-router/experimental'
import { defineColadaLoader } from 'vue-router/experimental/pinia-colada'

export const usePostData = defineColadaLoader('posts.show', {
  key: (to) => ['posts', to.params.id],
  async query(to) {
    const response = await api.getPost({ id: to.params.id as string })
    if (response.status === 404) {
      // navigate to not found page with the same URL
      reroute({ name: 'not-found', params: { path: to.fullpath.split('/').filter(Boolean) } })
    }
    if (response.status !== 200) {
      throw new Error('Failed to fetch post')
    }
    return response.body.data
  },
  staleTime: 60_000,
})

<!-- pages/posts/[id].vue -->
<script lang="ts">
import { usePostData } from '@/loaders/post-loader'
export { usePostData }
</script>

<!-- pages/[[...path]]+.vue -->
<script setup>
definePage({ name: 'not-found' })
</script>

Problem

Navigating to /posts/:id with a missing Post (HTTP 404) does not show the not-found page. The Post route still renders or shows a query error.

We tried reroute({ name: 'not-found', params: { path: ... } }), same result. Using only reroute({ name: 'not-found' }) did not fix it either.

Questions

What's the recommended way to handle API 404s with defineColadaLoader and reroute(), or return new NavigationResult(...)?

Is there a known gotcha when the same loader is also used from child components (not only exported from the page)?

Any recommended pattern for passing the attempted URL into a catch-all not-found route?

Environment

• vue-router 5.0.4
• vue 3.5.32

[posva]

reroute({ name: 'not-found', params: { path: ... } }) is the way. Maybe there is something else wrong. Do you have a boiled down repro?

[fontanaen]

Yes, I made a minimal repro
Unknown URL → not-found works. Missing post (/posts/x) → reroute runs (console log) but no redirect.

[posva]

you just had a typo: reroute({ name: 'not-found', params: { path: route.fullPath.split('/').filter(Boolean) } }). It was to instead of name. that's why it was erroring in TS

[fontanaen]

Oh yes my bad 😅

I fix my initial issue, @pinia/colada version was 1.0.0 → upgraded to latest version now works well

Thanks for your help!