Vue 路由器 404 页面 - Javascript

在 Vue.js 应用程序中，路由器是一个必不可少的组件，它为应用程序提供了路由和导航功能。在开发过程中，我们经常需要创建自定义的 404 页面，以向用户展示页面未找到的错误信息。本篇文章将介绍如何使用 Vue 路由器来实现自定义的 404 页面。

创建 404 页面组件

首先，我们需要创建一个 404 页面组件，用于展示页面未找到的错误信息。可以使用以下代码来创建组件：

<template>
  <div class="not-found">
    <h1>404 页面未找到</h1>
    <p>对不起，页面未找到，请检查您输入的网址是否正确。</p>
  </div>
</template>

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

<style>
.not-found {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
</style>

在上面的代码中，我们创建了一个名为 NotFound 的组件，并在模板中展示了错误信息。为了让组件具有良好的可定制性，我们还可以使用 props 属性传递错误信息等参数。

配置路由

完成 404 页面组件的创建后，我们需要在路由器中配置该组件以实现自定义的 404 页面。可以通过在 Vue 单文件组件中创建路由器的方式来配置路由。

import Vue from "vue";
import VueRouter from "vue-router";
import NotFound from "./components/NotFound";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
  {
    path: "/contact",
    component: Contact,
  },
  // 定义 404 页面路由
  {
    path: "*",
    component: NotFound,
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

在上述代码中，我们定义了一个名为 NotFound 的组件，并将该组件与 * 路径匹配，这代表着当路由找不到匹配的路径时，将会显示该组件。

结语

本篇文章介绍了使用 Vue 路由器来实现自定义的 404 页面的方法。通过创建一个 404 页面组件并配置路由器，在我们的应用程序中展示友好的页面未找到的错误信息。如果您对 Vue 路由器感兴趣，建议您在官方文档中深入了解相关知识。