Vue实现当访问的路由不存在时跳转到404页面的方法详解

更新时间：2023年12月07日 09:36:28 作者：马可家的菠萝

在 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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

在Vue3中实现动态路由的示例代码
Vue3中的动态路由是一种高级功能,它允许你在URL中包含变量,这些变量可以在组件内部通过$route.params对象访问,动态路由通常用于构建可配置性强、更具灵活性的应用,本文详细介绍了如何在vue3中实现动态路由,需要的朋友可以参考下
2024-07-07
vue中v-for加载本地静态图片方法
下面小编就为大家分享一篇vue中v-for加载本地静态图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue 点击按钮增加一行的方法
今天小编就为大家分享一篇vue 点击按钮增加一行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
基于vue手动实现一个日历组件
这篇文章主要为大家详细介绍了如何基于vue手动实现一个日历组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
2024-01-01
vue项目启动命令个人学习记录
最近想要学习vue,正好看到资料,如何通过命令创建vue项目的方法,就留个笔记,下面这篇文章主要给大家介绍了关于vue项目启动命令的相关资料,需要的朋友可以参考下
2023-02-02
详解如何提高 webpack 构建 Vue 项目的速度
这篇文章主要介绍了详解如何提高 webpack 构建 Vue 项目的速度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能
vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue3+TypeScript 常用代码示例总结
本文主要介绍了Vue3+TypeScript 常用代码示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-03-03
Vue中的虚拟dom分享
虚拟DOM是一种用JavaScript对象来描述真实DOM的技术,通过diff算法实现高效的DOM更新,提高页面性能,Vue通过render函数和VNode实现虚拟DOM,结合diff算法减少DOM操作,提升用户体验
2024-12-12
vue进度条组件实现代码(可拖拽可点击)
在日常开发中随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,这篇文章主要给大家介绍了关于vue进度条组件实现(可拖拽可点击)的相关资料,需要的朋友可以参考下
2023-12-12