Vue实现当访问的路由不存在时跳转到404页面的方法详解
作者：马可家的菠萝
在 Vue3 中,可以使用 Vue Router 实现跳转到 404 页面,即当用户访问一个不存在路由时,系统会默认跳转到 404 页面,本文给大家介绍了一个简单的实现方法,需要的朋友可以参考下
前言
在 Vue3 中，可以使用 Vue Router 实现跳转到 404 页面，即当用户访问一个不存在路由时，系统会默认跳转到 404 页面。以下是一个简单的实现方法：
图例
404页面文件
在项目的根目录下创建一个名为 404.vue 的文件，用于编写 404 页面。在 404.vue 文件中，你可以添加自定义的组件和内容。例如：
<template>
<div>
<h1>404 页面不存在</h1>
<p>您访问的页面不存在，请返回 <router-link to="/">首页</router-link></p>
</div>
</template>
<script>
export default {
name: 'NotFound',
}
</script>路由配置
1、首先，确保你已经安装了 Vue Router。如果没有，请使用以下命令进行安装：
npm install vue-router@next --save
2、在项目的 src 目录下创建一个名为 router 的文件夹，用于存放路由配置。在 router 文件夹中创建一个名为 index.js 的文件，用于配置路由。
3、在 index.js 文件中，首先导入 createRouter、createWebHistory 和 RouteRecordRaw 方法，然后定义一个名为 routes 的数组，用于存放所有路由信息。例如：
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: () => import('@/views/home.vue'),
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component:() => import('@/views/Components/404.vue')
},
];
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
});
export default router;4、在项目的入口文件 main.js 中，引入并使用路由配置。例如：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')实现原理
关键实现是 '/:catchAll(.*)'。在 Vue Router 中，:catchAll 是一个特殊字符，它用于匹配所有的路径。当你在路由配置中使用 :catchAll 时，它表示匹配所有无法被其他路由规则匹配的路径。因此，当访问的路由不存在时，就会总动跳转到路由path为'/:catchAll(.*)'的页面。
以上就是Vue实现当访问的路由不存在时跳转到404页面的方法详解的详细内容，更多关于Vue路由不存在跳转404的资料请关注脚本之家其它相关文章！