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

您可能感兴趣的文章:

vue自定义权限指令的实现
本文主要介绍了vue自定义权限指令的实现
2024-05-05
vue实现el-select的change事件过程
这篇文章主要介绍了vue实现el-select的change事件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
解决Vue Loading PostCSS Plugin failed:Cann
这篇文章主要介绍了解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue获取DOM元素样式和样式更改示例
本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
使用Vue后如何针对搜索引擎做SEO优化
本文介绍了Vue.js在SEO优化方面的挑战,并提供了一些方法来解决这些问题,包括使用服务器端渲染、预渲染和使用VueRouter的History模式来生成静态HTML页面,以及添加meta信息和内部链接来提高搜索引擎的索引和排名
2025-02-02
vue2从数据变化到视图变化发布订阅模式详解
这篇文章主要为大家介绍了vue2从数据变化到视图变化发布订阅模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue实现面包屑导航的正确方式
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，它的作用是告诉访问者他们在网站中的位置以及如何返回，本文为大家介绍了实现面包屑导航的正确方式，需要的可以参考一下
2023-06-06
Vuex子模块调用子模块的actions或mutations实现方式
这篇文章主要介绍了Vuex子模块调用子模块的actions或mutations实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
关于net 6+vue 插件axios 后端接收参数问题
接到这样一个项目需求是这样的，前端vue 必须对象传递后端也必须对象接收，接下来通过本文给大家介绍下net 6+vue 插件axios 后端接收参数的问题,需要的朋友可以参考下
2022-01-01
vue动态绑定组件子父组件多表单验证功能的实现代码
这篇文章主要介绍了vue动态绑定组件子父组件多表单验证功能的实现代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05