【Vue路由-404】

什么是404页面？

404页面是指当用户尝试访问不存在的页面时，服务器返回的错误页面。在Vue应用中，可以通过Vue Router来自定义这个页面，以提供更友好和有用的用户体验。

创建Vue Router

通过以下命令安装：

npm install vue-router

在项目中导入Vue Router并配置路由。创建一个新文件，例如router.js，并添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 定义你的路由路径
]

const router = new VueRouter({
  routes,
})

export default router

添加404页面

创建一个名为NotFound.vue的新组件，用于显示404错误信息。在这个组件中可以自定义错误消息、样式和导航链接。

<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;
  margin-top: 50px;
  font-size: 24px;
}
</style>

配置路由

接下来，将404页面添加到路由配置中。在router.js文件中，将404页面的路由添加到路由数组中：

import NotFound from './views/NotFound.vue'

const routes = [
  // 其他路由...
  
  // 添加404页面路由
  { path: '*', component: NotFound }
]