在vue3项目中设置错误路径的统一跳转

在我们前端开发过程中,如果,访问到了错误的或者不存在的路径,那么会直接出现空白。在一个完整的项目中,应该给用户一些友好的提示,显示他访问到了错误的页面。

我们可以专门的创建一个错误界面的.vue文件,并在创建路由时,指定所有错误的路径都直接显示这个错误界面,这样就对我们的使用人员非常友好了。

在vue3项目中创建一个简单的错误组件NotFound.vue:

复制代码
<template>
    <div>
      <h1>404 - Not Found</h1>

      <p>页面不存在,还没有开发出来,请尝试访问其他路径。。。。。。</p>
    
     <!-- 跳转一个新页面 -->
 <el-link type="primary"  style="transform: translateX(330px)"  @click="toLogin">去登录页面</el-link>

    
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router';
  const router = useRouter()

const toLogin = () => {
    router.push('/login')
    }

  </script>
  


  <style scoped>
  </style>

当然,我这个错误页面就显得非常粗糙了,如果,你可以自己设置一个错误页面的组件。显示的精美一点。在这个错误页面中,最好是能给用户一些提示。

在创建路由时,指定所有错误的路径的展示组件:

复制代码
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import NotFound from './views/NotFound.vue'; // 导入 404 页面组件

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由配置...
  
  // 通配符路由,匹配所有无法识别的路径
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

如果你对vue3的路由不熟悉,可以现参考一下这篇文章:

vue3中路由的使用(详细讲解)_vue3中路由配置的作用-CSDN博客

这样,当用户访问项目中不存在的路径时,就会自动跳转到 404 页面,并显示相应的错误信息。

启动这个vue3项目,来演示一下这个功能的实现。

访问一个正确的路径:

访问一个不存在的路径:

可以看到正确的显示出了,我们想要的结果。

相关推荐
Mike_jia1 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼1 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞1 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子1 小时前
JS 打造动态表格
前端·javascript·面试
excel1 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_01 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code1 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
百思可瑞教育2 小时前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li35749 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj10 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js