How to create a 404 component in vuejs using vue - router

在Vue.js中使用vue-router创建一个404组件是一个常见的需求，用于处理用户访问不存在的页面的情况。以下是实现这一功能的详细步骤：

1. 安装和设置vue-router

首先，确保你的Vue项目中已经安装了vue-router。如果未安装，可以通过npm或yarn来安装它：

bash
npm install vue-router
# 或者
yarn add vue-router

接下来，在项目中设置路由。创建一个router.js文件（或者在现有文件中添加路由配置）。

2. 创建404组件

在src/components目录下，创建一个新的Vue组件，命名为NotFound.vue。这个组件将展示404错误页面。

vue
<template>
  <div>
    <h1>404 Not Found</h1>
    <p>抱歉，您访问的页面不存在。</p>
  </div>
</template>

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

<style>
/* 样式 */
</style>

3. 配置路由

在router.js中导入NotFound组件，并在Vue Router的路由配置中添加一个规则来处理不存在的路由。

javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import NotFound from './components/NotFound.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '*',
      name: 'not-found',
      component: NotFound
    }
  ]
});

注意，path: '*' 是一个通配符路由，用于匹配那些不符合其他路由定义的路径。将这条规则放在所有其他路由定义的最后，以确保只有在没有其他路由匹配的情况下才会匹配到这条规则。

4. 使用router-view

在你的主Vue应用的模板中，使用 <router-view></router-view> 组件来渲染匹配的组件。这通常在App.vue文件中完成：

vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

5. 测试404页面

启动你的Vue应用，并在浏览器中尝试访问一个不存在的路由，比如 http://localhost:8080/some-non-existing-page。你应该能看到你的404页面，显示“404 Not Found”和“抱歉，您访问的页面不存在。”的信息。

通过这些步骤，你可以在Vue.js项目中有效地管理和展示404错误页面，提升用户体验。