Nuxt•5mo ago

NuxtLink navigation to nested route does not show error page on client side navigation

Imagine we have nested route with error inside: pages/course/[lessonSlug].vue

<script>
throw createError({message: "sus",fatal: true})
</script>

<script>
throw createError({message: "sus",fatal: true})
</script>

Here is how pages folder looks like: -| pages/ ---| course/ ------| [lessonSlug].vue ---| course.vue ---| index.vue Here is the problem, second NuxtLink with error in nested route: pages/index.vue

<template>
  <NuxtLink to="/course">NuxtLink /course</NuxtLink>
  <NuxtLink to="/course/first_lesson">nuxtLink /first lesson</NuxtLink>
  <a href="/course/first_lesson">a /first lesson</a>
</template>

<template>
  <NuxtLink to="/course">NuxtLink /course</NuxtLink>
  <NuxtLink to="/course/first_lesson">nuxtLink /first lesson</NuxtLink>
  <a href="/course/first_lesson">a /first lesson</a>
</template>

When I click on the /course NuxtLink everything is fine, I can press one of two links and NuxtErrorBoundary will do the thing and show fallback template. When I click on second link with a nested route, the address bar changes, but nothing is re-rendered (the error page is not shown until page is refreshed). If I go to the nested route using the a tag or the address bar, it will show an error page as it should be. So should I just always use <a> with nested routes to be not afraid of unexpected errors? pages/course.vue:

<template>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtErrorBoundary>
    <NuxtPage/>
  
    <template #error="{error,clearError}"...>
  </NuxtErrorBoundary>
</template>

<template>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtErrorBoundary>
    <NuxtPage/>
  
    <template #error="{error,clearError}"...>
  </NuxtErrorBoundary>
</template>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

NuxtLink navigation to nested route does not show error page on client side navigation