Vue 3项目自定义404 NotFound页面无法正常触发该如何解决？

问题根源 #

你当前的核心问题出在App.vue的配置上：你直接将Home组件硬编码到了模板中，且没有添加Vue Router必需的<router-view>路由出口。不管路由匹配到什么地址，页面永远只会渲染你写死的Home组件，自然无法显示404页面。

解决方案 #

按以下步骤修改即可：

1. 替换App.vue代码，删除硬编码的Home组件引用，添加<router-view>作为路由组件的渲染占位：

<template>
  <div id="app">
    <app-header />
    <div class="app-container">
      <!-- 替换原来的<Home />为router-view -->
      <router-view />
    </div>
    <Footer />
  </div>
</template>

<script>
import AppHeader from "@/components/AppHeader.vue";
// 删掉Home组件的引入
import Footer from "@/components/Footer.vue";

export default {
  name: "App",
  components: {
    AppHeader,
    // 删掉Home组件的注册
    Footer,
  },
};
</script>

2. 路径检查：你main.js中引入路由的语句为import router from "./router"，需要确保你的路由文件放在src/router/index.js路径下，如果你当前路由文件是根目录下的Route.js，需要将导入路径修改为import router from "./Route.js"。
3. 版本检查：你写的404匹配规则/:pathMatch(.*)*是Vue Router 4的专属语法，与Vue 3完全适配，如果你不小心安装了3.x版本的Vue Router，可以将404路由的path改为path: "*"临时兼容，更建议升级到4.x版本匹配Vue3生态。

修改完成后重启项目，访问不存在的路径即可正常显示404页面。

内容的提问来源于stack exchange，提问作者Joan