当使用Vue3 Router尝试访问一个不存在的路由时，如何配置它以显示404页面？

在Vue3中使用Vuex Router时，当试图访问不存在的路由，你可以通过设置一个全局守卫（gaurd）或者自定义错误处理器来处理这种场景。这里是一个简单的步骤：

1. 首先，在`src/router/index.js`文件中，安装并导入Vue Router的相应模块：

   import { createRouter, createWebHistory } from 'vue-router';

2. 定义一个全局守卫，通常在`router/index.js`或者单独的`router/guards.js`文件中：

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes: ... // 你的路由配置
   });

   router.beforeEach((to, from, next) => {
     if (to.matched.some(record => !record.meta.hidden)) {
       next();
     } else {
       next({ name: 'not-found', path: '/404' });
     }
   });

   router.afterEach(() => {
     document.title = router.mode === 'history' ? router.currentRoute.meta.title : '';
   });

   export default router;

在这个守卫中，如果当前路由存在，则直接进入；否则，跳转到名为"not-found"的404页面。

3. 创建一个404组件`src/components/NotFound.vue`：

   <template>
     <div>
       <h1>404 Not Found</h1>
       <p>We couldn't find the page you're looking for.</p>
     </div>
   </template>

   <script>
   export default {
     name: "NotFound"
   };
   </script>

4. 确保已经为"not-found"路由添加了相应的元数据，比如标题：

   {
     path: '/404',
     component: () => import('@/components/NotFound'),
     meta: {
       title: '404 - Page Not Found'
     }
   }

5. 如果你想自定义错误处理器，可以在`src/main.js`中做如下设置：

   errorCaptured(err, instance, info) {
     console.error(err);
     next(
       err.response.status >= 400 && err.response.status < 500
         ? { path: '/404' }
         : { redirect: '/' }
     );
   },

现在，当访问不存在的路由时，应用会显示你配置的404页面。