---

一、前言

在 Vue 3 中，你可以使用 Vue Router 来实现当访问的路由不存在时跳转到 404 页面。以下是详细的方法：

1. 创建 404 组件

首先，你需要创建一个用来显示 404 错误的组件。例如，你可以创建一个 NotFound.vue 组件来展示 404 错误页面的内容。

<template><div><h1>404 Not Found</h1><p>Sorry, the page you are looking for does not exist.</p></div>
</template><script>
export default {name: 'NotFound'
}
</script>

2. 配置路由

接下来，在 Vue Router 的路由配置中，你需要添加一个通配符路由来捕获所有未匹配的路径，并将其指向 404 组件。

import { createRouter, createWebHistory } from 'vue-router';
import NotFound from './components/NotFound.vue';const routes = [// 其他路由// ...// 404 路由，放在最后{ path: '/:pathMatch(.*)', component: NotFound },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

在这个例子中，我们使用了通配符路由 /:pathMatch(.*) 来捕获所有未匹配的路径，并将其指向 404 组件 NotFound。确保将这个通配符路由放在路由配置的最后，这样它才能捕获所有未匹配的路径。

3. 使用 router-link

最后，在你的应用中，你可以使用 router-link 组件来创建导航链接。当用户访问了一个不存在的路由时，他们将被重定向到 404 页面。

<template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-link to="/non-existent-page">Non-Existent Page</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App',
}
</script>

通过以上的步骤，你就可以在 Vue 3 中实现当访问的路由不存在时自动跳转到 404 页面。