在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项目,来演示一下这个功能的实现。

访问一个正确的路径:

访问一个不存在的路径:

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

相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript