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

您可能感兴趣的文章:

VueX安装及使用基础教程
这篇文章介绍了VueX安装及使用基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
Vue引入Stylus知识点总结
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。
2020-01-01
Vue Element前端应用开发之获取后端数据
这篇文章主要介绍了Vue Element前端应用开发之获取后端数据，对vue感兴趣的同学，可以参考下
2021-05-05
select的change方法传递多个参数的方法详解
element-ui中的select,checkbox等组件的change方法的回调函数只有当前选择的val,如果想再传入自定义参数怎么办,本文给大家分享select的change方法如何传递多个参数,感兴趣的朋友一起看看吧
2024-02-02
vue中elementUI表单循环验证方式
这篇文章主要介绍了vue中elementUI表单循环验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue 中directive功能的简单实现
本篇介绍directive的简单实现，主要学习其实现的思路及代码的设计，需要的朋友参考下吧
2018-01-01
vue条件渲染列表渲染原理示例详解
这篇文章主要为大家介绍了vue条件渲染列表渲染原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
Vue监听属性和计算属性
这篇文章主要介绍了Vue监听属性和计算属性，基本用法添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行，下面来看详细内容,需要的朋友也可以参考一下
2021-12-12
从零撸一个pc端vue的ui组件库( 计数器组件 )
这篇文章主要介绍了pc端vue的ui组件库的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vue时间格式化实例代码
本篇文章主要介绍了vue时间格式化实例代码，这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06