面试题：Vue Router 如何配置 404 页面？

在 Vue Router 中，配置 404 页面（即未匹配到路由时的回退页面）是一个常见的需求。以下是配置 404 页面的几种方式：

1. **使用通配符路由（`` 或 `/:pathMatch(.)*`）**

Vue Router 支持通配符路由，可以捕获所有未匹配的路由，并将其重定向到 404 页面。

配置方式

在路由配置的最后添加一个通配符路由。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  // 其他路由
  {
    path: '/:pathMatch(.*)*', // 捕获所有未匹配的路由
    component: NotFound // 404 页面组件
  }
];

示例

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import NotFound from './components/NotFound.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/:pathMatch(.*)*', // 捕获所有未匹配的路由
      component: NotFound
    }
  ]
});

export default router;

说明

path: '/:pathMatch(.*)*'：捕获所有未匹配的路由，并将其匹配到 NotFound 组件。
path: '*'：在 Vue Router 3 中也可以使用 * 作为通配符，但在 Vue Router 4 中推荐使用 /:pathMatch(.*)*。

2. 重定向到 404 页面

如果希望将所有未匹配的路由重定向到一个特定的 404 页面，可以使用 redirect 配置。

配置方式

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  // 其他路由
  {
    path: '/:pathMatch(.*)*', // 捕获所有未匹配的路由
    redirect: '/404' // 重定向到 404 页面
  },
  {
    path: '/404',
    component: NotFound
  }
];

示例

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/:pathMatch(.*)*', // 捕获所有未匹配的路由
      redirect: '/404' // 重定向到 404 页面
    },
    {
      path: '/404',
      component: NotFound
    }
  ]
});

3. 动态设置 404 页面

如果希望动态设置 404 页面（例如根据用户权限显示不同的 404 页面），可以在导航守卫中处理。

配置方式

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/404',
      component: NotFound
    },
    {
      path: '*', // 捕获所有未匹配的路由
      redirect: (to) => {
        // 根据条件动态重定向
        if (to.path.startsWith('/admin')) {
          return '/admin-404'; // 管理员 404 页面
        } else {
          return '/404'; // 普通用户 404 页面
        }
      }
    }
  ]
});

4. Vue Router 4 中的配置

在 Vue Router 4 中，通配符路由的语法有所变化，推荐使用 /:pathMatch(.*)*。

配置方式

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import NotFound from './components/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/:pathMatch(.*)*', // 捕获所有未匹配的路由
      component: NotFound
    }
  ]
});

export default router;

5. 自定义 404 页面

404 页面通常是一个独立的组件，可以根据需求设计样式和功能。

示例：`NotFound.vue`

<template>
  <div class="not-found">
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

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

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

总结

方法	适用场景	特点
通配符路由	捕获所有未匹配的路由，显示 404 页面。	简单直接，适合大多数场景。
重定向到 404 页面	将所有未匹配的路由重定向到特定的 404 页面。	适合需要统一处理 404 页面的场景。
动态设置 404 页面	根据条件动态显示不同的 404 页面。	适合需要根据用户权限或其他条件显示不同 404 页面的场景。
Vue Router 4 配置	在 Vue Router 4 中使用 `/:pathMatch(.)` 捕获未匹配的路由。	推荐在 Vue Router 4 中使用。