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生产环境,页面卡死的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vuex刷新页面丢失登录token信息的解决方案
本文主要介绍了vuex刷新页面丢失登录token信息的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
一文带你搞懂Vue3中的各种ref的使用
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题
2023-08-08
聊聊vue 中的v-on参数问题
这篇文章主要介绍了聊聊vue 中的v-on参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-01-01
vue 录制视频并压缩视频文件的方法
这篇文章主要介绍了vue 录制视频并压缩视频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue实现用户登录及token验证
这篇文章主要为大家详细介绍了Vue实现用户登录及token验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
在Vue里如何把网页的数据导出到Excel的方法
这篇文章主要介绍了在Vue里如何把网页的数据导出到Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
这篇文章主要介绍了解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,需要的朋友可以参考下
2019-10-10
Vue Echarts实现可视化世界地图代码实例
这篇文章主要介绍了Vue Echarts实现可视化世界地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue 计时器组件的实现代码
本篇文章主要介绍了vue 计时器组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09