位置: 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游戏笔记本怎么样?)

  • 应纳税所得额100万以内,税负2.5%是什么意思
  • 房产税计税依据是什么
  • 应交税费是什么科目
  • 在外地设立分公司如何办理
  • 实收资本库存现金凭证怎么开
  • 普票需要填写全部开票信息吗
  • 开票资料银行必须填写吗
  • 车辆补贴的钱最快多久到账
  • 虚开普票的立案标准
  • 政府会计制度固定资产折旧哪个月开始计提
  • 进项税有余额但没有余额
  • 增值税普票跨月怎么冲红
  • 建筑公司收到工程服务发票怎么做会计分录
  • 单位收到增值税专用开票人写管理员
  • 职工福利费发票不小心抵扣了汇算清缴
  • 开加工费的发票该如何抵扣?
  • 小规模纳税人核定征收标准
  • 预缴税款多缴了怎么办
  • 社保滞纳金能否超过本金
  • 住房公积金个人缴费比例
  • 购销合同印花税税率
  • 施工企业资产负债率
  • 赊销的账务处理流程
  • 出租房屋如何确认收入
  • 购进产品样品怎么做分录
  • 净现值是否可行
  • 销售回款率的具体指标
  • 公司流水账是会计做吗
  • 出口转内销会计账务处理
  • 为什么叫win7
  • php下载限速
  • mac压盘
  • 深入浅出stm8
  • php文本转数字
  • js时间格式转换时间戳
  • 有形动产融资租赁税率是多少
  • 开发票的时候补差价怎么处理?
  • 补税的分录
  • 什么叫含税和未含税区别
  • roi opencv
  • php fopen()
  • 工会经费怎么上缴
  • 分公司在外地,企业怎么交税
  • 银行存款利息的会计科目
  • 职工食堂费用计入哪个科目
  • 开具免税的发票,"税率"栏该如何填开?
  • 小企业资本公积的来源有
  • 外购产品捐赠
  • 附加税费怎么计算
  • 车辆计提折旧需要结转吗
  • 建筑业无票收入收货款分录
  • 不动产租赁如何避税
  • 简易征收的纳税标准
  • 收到商业汇票怎么入账
  • 应付账款周转率计算公式
  • 用于研发购买的材料进项税额
  • 年度计提资产减值准备 好还是坏
  • 企业弥补亏损的顺序
  • 首次计提坏账准备应计入
  • 待处理财产损益是备抵类科目吗
  • 工资条上为什么不显示生育险
  • 营改增后建筑行业进项税能抵扣吗
  • haproxy教程
  • win10系统微软账号退不了怎么办
  • xp系统net framework 3.5
  • ubuntu software database is broken错误该怎么解决?
  • xp系统如何添加启动项
  • dwm.exe占用内存过高怎么办
  • win版本微信
  • 怎么修改win10登录名
  • win10应用商店是灰的
  • ReactNative 之FlatList使用及踩坑封装总结
  • javascript高级程序设计pdf下载
  • unity androidx
  • linux python gui
  • jquery鼠标移入移出切换图片
  • js dom操作方法
  • 税务绩效管理存在不足
  • 什么是居民企业和非居民企业
  • 互联网新闻信息服务提供者为用户提供互联网新闻
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设