位置: IT常识 - 正文

在Vue3项目中,输入没有路由对应的路径时候,怎么跳转到404或者首页(在vue3项目中自定义组件通常存放在)

编辑:rootadmin
在Vue3项目中,输入没有路由对应的路径时候,怎么跳转到404或者首页

推荐整理分享在Vue3项目中,输入没有路由对应的路径时候,怎么跳转到404或者首页(在vue3项目中自定义组件通常存放在),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue在项目中怎么用的,vue3例子,在vue3项目中自定义组件通常存放在,在vue项目中遇到的最大的困难,在vue3项目中使用vue2,vue在项目中遇到哪些问题,在vue3项目中自定义组件通常存放在,vue在项目中怎么用的,内容如对您有帮助,希望把文章链接给更多的朋友!

在一个Vue3应用中,通常情况下,我们使用Vue Router来处理路由。在Vue Router中,当用户请求输入一个不正确的URL路径时,没有路由与其相匹配,这时候会返回一个默认的404页面或者重定向到首页。因此,本文将通过以下几个方面来讨论如何在Vue3项目中实现这一功能。

1. 异步组件

在Vue3中,我们可以使用异步组件来延迟加载路由组件,并在组件加载完成前显示一个加载指示器。异步组件可以通过函数返回一个promise来实现,该promise在组件加载成功后resolve。

const Example = () => import('./Example.vue')

对于异步组件,当路由不能匹配时,Vue Router可以自动加载404组件。这要求您在路由表中明确定义404路由,并将其放在最后。这是一个示例:

const routes = [ { path: '/home', component: Home }, { path: '/example', component: Example }, { path: '/404', component: NotFound }, { path: '*', redirect: '/404' } ]

在这个示例中,我们向路由表中添加了一个NotFound组件,当路径不匹配时就会被加载。

2. 全局前置守卫在Vue3项目中,输入没有路由对应的路径时候,怎么跳转到404或者首页(在vue3项目中自定义组件通常存放在)

Vue Router还提供了另一种处理404的方法——全局前置守卫。这种方法涉及使用beforeEach钩子函数,在导航到任何路由之前进行检查。如果没有匹配的路由,则可以将用户重定向到404页面。

router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next('/404') } else { next() } })

在上面的代码中,我们检测了即将要跳转到的路由对象是否拥有matched属性,如果有,那么继续跳转,否则就重定向到/404路由。

3. HTML5 history模式

Vue Router还支持HTML5 history模式,在这种模式下,我们可以将URL路径看起来像接近传统网站中的路径,而不是像一个前端路由。例如,我们可以让'www.xxx.com/about'与'/about'匹配。

在HTML5 history模式下使用时,客户端发送的任何请求都将被发送到服务器,而服务器将始终返回同一HTML文件。因此,在后端设置路由规则是必要的。

为在vue-router中启用history模式,需要使用vue-router选项中的mode属性:

const router = new VueRouter({ mode: 'history', routes: [...] })

在使用HTML5 history模式时,如果用户访问的URL不存在,则可以将用户重定向到默认首页或自定义404页面。

4. 计算属性

在Vue3中,我们还可以使用计算属性来实现处理404的逻辑。我们可以根据路由对象中matched属性的长度来检测是否有匹配的路由。如果没有,我们可以使用$route.path将用户重定向到自定义404页面。

<template> <div v-if="isNotFound"> <h1>404 Not Found</h1> </div> </template> <script> export default { computed: { isNotFound() { return this.$route.matched.length === 0 } }, watch: { isNotFound(val) { if (val) { this.$router.push('/404') } } } } </script>

在上面的示例中,我们使用一个计算属性isNotFound和一个watcher来监视isNotFound的变化。当isNotFound变为true时,我们将路由推送到/404。

结论

在Vue3中,处理404页面的方法有很多。我们可以使用异步组件、全局前置守卫、HTML5 history模式以及计算属性等技术来实现这一功能。这些方法可以根据我们的需求和项目的规模进行选择。无论使用哪种技术,我们都应该遵循最佳实践并保持代码清晰易读,并且对用户友好。

本文链接地址:https://www.jiuchutong.com/zhishi/287118.html 转载请保留说明!

上一篇:网站国际化 多语言处理工具i18n安装使用方法(网站国际化方案)

下一篇:神舟战神K670D 笔记本Windows10系统改Windows7系统的安(神舟战神k670c-g4e1游戏笔记本怎么样?)

  • 合作社收到政府补助款怎么做分录呢
  • 长期债权投资是什么科目借贷
  • 建筑工程怎么确定施工工程进度
  • 新会计准则 预付房租怎么做账
  • 人力资源公司代招的岗位可以去吗
  • 会计凭证传递的终点是
  • 证券交易所风险公告怎么写
  • 研发费用加计扣除行业
  • 物业公司收取供热管道内网的维护费用合理吗
  • 软件开发服务费会计分录
  • 不预缴会怎么样
  • 从两处领取工资,个人所得税应该如何申报缴纳?
  • 专用发票退回
  • 收到商业承兑汇票怎么兑现
  • 企业长期股权投资
  • 税率变化应付账款怎么处理
  • 专票当普票入帐有问题吗
  • 转正工资差额什么意思
  • 营改增后的劳务费怎么开
  • 事业单位零余额账户使用流程
  • 外贸企业进项税额抵扣证明
  • 如何暂停win11更新
  • 跨年发票能不能开
  • 收到保险公司的赔款计入什么科目
  • thinkphp如何做微服务
  • php隐藏图片地址
  • taskset命令详解
  • 财政贴息会计处理怎么理解
  • 增值税直接减免税额要交企业所得税吗
  • 融资租赁设备所有权归谁
  • 广告费支出税前扣除标准30
  • 日记账的定义
  • 登记银行存款日记账的凭证有哪些
  • 信用证支付方式,银行处理单据时主要关注( )
  • 织梦常用调用标签
  • 汇算清缴涉及哪些调整
  • mysql使用ssl连接
  • mongo groupby
  • 支付工程款的会计科目怎么写
  • 进项税为什么记在贷方
  • 明细账怎么补登
  • PostgreSQL教程(十五):系统表详解
  • 计划成本核算的实际成本怎么算
  • 职工薪酬都包括什么
  • 农民专业合作社法
  • 开出银行承兑汇票一张,面值30000元,用于抵付
  • 进项税额是怎么算的
  • 减资如何账务处理
  • 预提成本和冲回成本金额不一致情况说明
  • 预付款项怎么做分录
  • 办公室购买电脑属于什么费用
  • 暂扣员工工资应怎么处理
  • 汇算清缴亏损弥补不能自动带出该怎么办
  • 一般纳税人出现以下哪些情况时,其进项税额不得抵扣( )
  • 广告公司没有广告合法吗
  • 从公账提取备用金到个人账户怎么做会计分录
  • 企业管理费的计算基础
  • 从银行提取现金分录
  • 投资款没有进入公司账户算投资款吗
  • mysql按字节截取
  • windows硬盘是什么意思
  • 使用组策略可控制什么
  • freebsd 升级
  • 硬盘分几个区最好
  • win10怎么安装网络驱动程序
  • WinXP创建一键静音快捷键(在喇叭消失的情况下实用)
  • directx device
  • linux在实际中的应用
  • js中数组操作
  • ntp配置详解
  • javascript自动化
  • android 更新apk
  • javascript基础书
  • 什么绑定什么服务
  • android studio i使用
  • jquery示例
  • 药店买药开票吗
  • 残疾人可以免增值税吗
  • 应交税费应交增值税已交税金是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设