What could be causing the failure of the 404 view to appear when navigating to routes with parameters in this Vue 3 application?

Question

What could be causing the failure of the 404 view to appear when navigating to routes with parameters in this Vue 3 application?

Currently, I have been dedicating my time to developing a single page application using Vue 3, TypeScript, and integrating The Movie Database (TMDB) API.

My current focus is on creating a custom 404 error page for the application.

In the file src\router\index.ts, you will find the following code:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import TopRatedMoviesView from '../views/TopRatedMoviesView.vue';
import MovieDetailsView from '../views/MovieDetailsView.vue';
import ActorDetailsView from '../views/ActorDetailsView.vue';
import NotFoundView from '../views/NotFoundView.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/top-rated',
    name: 'top_rated',
    component: TopRatedMoviesView
  },
  {
    path: '/movie/:id',
    name: 'movie_details',
    component: MovieDetailsView
  },
  {
    path: '/actor/:id',
    name: 'actor_details',
    component: ActorDetailsView
  },
  {
    path: '/:pathMatch(.*)*',
    name: "404",
    component: NotFoundView
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Within the file src\views\NotFoundView.vue, this is the content:

<template>
  <div class="container d-flex">
   <div class="text-center">
      <h1 class="mb-3">404 | page not found</h1>
      <router-link class="btn btn-sm btn-success" to="/">
        <strong>Go to the Homepage</strong>
      </router-link>
   </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'NotFoundView',

  });
</script>

The expected behavior is that the 404 view should display when there is a random string after the root URL, like

http://localhost:8080/someNonExistingPath

.

However, an issue arises when providing an incorrect parameter to a dynamic route, as seen in

http://localhost:8080/movie/a615656

.

I am seeking guidance on troubleshooting this issue and implementing a more reliable solution. Any suggestions would be greatly appreciated.

javascript typescript vue.js vuejs3

Answer 1

Answer №1

One reason this issue may occur is when you navigate to the /movie/a615656 URL, which still matches the route parameter /movie/:id. This is because sometimes, the id can contain non-numeric characters.

To resolve this, you have two options: either use route REGEX to filter out non-numeric values or manually redirect to the 404 view.

For instance, in your getMovieDetails method, you could check for non-alphanumeric characters and redirect to the 404 view. However, this approach can be inconsistent as even if the id is valid, the corresponding item may not be available on the server side. So a better practice is to handle errors in the catch method, like so:

.catch((err) => {
    //log error
    console.log(err);
    //if the error status is 404
    if (err.response.status == 404) {
        router.push({ name: '404' })
    }
});

While this approach may introduce a slight delay due to waiting for the server response, it is the recommended way to handle such situations. In fact, Nuxt's documentation provides a similar example:

const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

This code snippet serves as an illustration, so there's no need to be concerned if you're unfamiliar with NuxtJS.

Answer 2

One reason this issue may occur is when you navigate to the /movie/a615656 URL, which still matches the route parameter /movie/:id. This is because sometimes, the id can contain non-numeric characters.

To resolve this, you have two options: either use route REGEX to filter out non-numeric values or manually redirect to the 404 view.

For instance, in your getMovieDetails method, you could check for non-alphanumeric characters and redirect to the 404 view. However, this approach can be inconsistent as even if the id is valid, the corresponding item may not be available on the server side. So a better practice is to handle errors in the catch method, like so:

.catch((err) => {
    //log error
    console.log(err);
    //if the error status is 404
    if (err.response.status == 404) {
        router.push({ name: '404' })
    }
});

While this approach may introduce a slight delay due to waiting for the server response, it is the recommended way to handle such situations. In fact, Nuxt's documentation provides a similar example:

const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

This code snippet serves as an illustration, so there's no need to be concerned if you're unfamiliar with NuxtJS.

What could be causing the failure of the 404 view to appear when navigating to routes with parameters in this Vue 3 application?

Answer №1

Similar questions

Ways to apply the .not selector efficiently in jQuery

Encountering Error 500 with Jquery Min.Map File

Utilize $.ajax to gracefully wait for completion without causing the UI to freeze

Changing the designated materialUI class

How can I correct the error in accessing state data with a getter and displaying the outcome in a component?

Select a filter first before uploading your image

Cross-domain scripting

Attempting to modify the environmental variable within node.js via the terminal proves to be a fruitless endeavor as the value consistently remains undefined

Variables for NPM Configuration

Issue with Material UI scrollable tabs failing to render properly in Internet Explorer

What is the best way to generate a dynamic HTML table using Angular 6?

Generate a division element within an HTML page by invoking a function in Angular version 2

What is the best way to define a typescript interface as a class property?

What is the process for eliminating required validators from an Angular input field?

get an array of JSON data from a VueJS fetch or axios.get request

Vue.js fails to display multiple uploaded images

a:hover CSS style altering the behavior of buttons with images in a web browser

Executing a series of functions in succession using jQuery

Finding the index of a class using jQuery is posing some difficulties

PostgreSQL dynamic query with Node.js