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

cczfrluj 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(174)

我一直在使用Vue 3，TypeScript和电影数据库（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视图（如预期的那样）。
但是，当为动态路由http://localhost:8080/movie/a615656提供“坏”参数时，不会发生同样的情况。
我做错了什么？解决此问题最可靠的方法是什么？

vue.js

来源：https://stackoverflow.com/questions/77044766/why-does-the-404-view-fail-to-display-for-routes-with-params-in-this-vue-3-app

1条答案

按热度按时间

kgqe7b3p1#

可能的原因是当您访问/movie/a615656 URL时，它仍然满足路由参数/movie/:id。因为有时，id也可以包含非数字字符。
要解决这个问题，您可以使用路由REGEX来过滤掉非数字值，或者手动抛出404视图。
例如，在getMovieDetails方法中，您可以查找非字母数字字符并抛出404视图。但这会导致不一致性，因为即使id满足，具有id的项也可能在服务器端不可用，因此您最好的选择是在catch方法中抛出404，例如：

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

字符串
这可能会导致一个小的延迟，因为你必须等待服务器的响应，但这是你应该做的。即使在Nuxt指南中，他们提供了以下示例代码：

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

型
这只是一个例子，如果你不熟悉NuxtJS，

赞(0）回复(0）举报 2023-11-21

我来回答

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

1条答案

相关问题

热门标签

最新问答