Javascript 为什么在此 Vue 3 应用程序中带有参数的路由无法显示 404 视图

我一直在开发一个带有Vue 3、TypeScrip和电影数据库(TMDB)API的SPA.

我目前正在处理一个404页面.

在src\router\index.ts个人中，我有:

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

在src\views\NotFoundView.vue个人中，我有:

<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 Homepege</strong>
      </router-link>
   </div>
  </div>
</template>

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

  export default defineComponent({
    name: 'NotFoundView',

  });
</script>

当随机字符串紧跟在根URL http://localhost:8080/someNonExistingPath之后时，将显示404视图(不出所料).

但是，当向动态路由提供一个"坏"参数时，not也会发生同样的情况:http://localhost:8080/movie/a615656.

Stackblitz个

我做错了什么？解决此问题的最可靠方法是什么？