在Vue应用中处理404页面的解决方法

npm install vue-router

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import NotFound from '../views/NotFound.vue'; // 导入404页面组件

Vue.use(Router);

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '*', // 捕获所有未匹配的路由
    component: NotFound,
  },
];

const router = new Router({
  mode: 'history', // 使用HTML5的历史模式
  routes,
});

export default router;

<template>
  <div class="not-found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您请求的页面不存在或已删除。</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

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

<style scoped>
.not-found {
  text-align: center;
  padding: 50px;
}

.not-found h1 {
  font-size: 3em;
  color: #e74c3c;
}

.not-found p {
  font-size: 1.5em;
}
</style>

npm run serve

<template>
  <div class="not-found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您请求的页面不存在或已删除。</p>
    <router-link to="/">返回首页</router-link>
    <router-link to="/about">关于我们</router-link> <!-- 添加其他导航链接 -->
  </div>
</template>

<template>
  <div class="not-found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您请求的页面不存在或已删除。</p>
    <input type="text" placeholder="搜索..." v-model="searchQuery" />
    <button @click="search">搜索</button>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    search() {
      // 假设我们有一个搜索页面
      this.$router.push({ path: `/search`, query: { q: this.searchQuery } });
    },
  },
};
</script>