VUE前端编程浅谈路由的常见管理模式

VUE官方推荐使用vue-router作为路由的管理插件,基本的功能大家可参考官方文档:

https://router.vuejs.org/zh/guide/

VUE前端编程浅谈路由的常见管理模式

今天主要是介绍在处理项目时的业务场景路由处理模式和常见的一些问题处理方法:

如何管理较多的业务场景

在稍微复杂的系统中,管理大量的路由是我们常见的业务场景,在这种情况下,为了降低各业务模块的耦合,建立采用分块封装,统一注册的模式进行管理。如下图,consultant进行顾问路由的管理,所有的顾问路由和组件定位由该模块实现,同理,我们也可以类似的实现其它模块,如solution、finance等。

VUE前端编程浅谈路由的常见管理模式

然后,在统一的路由定义入口集中管理各模块路由。

VUE前端编程浅谈路由的常见管理模式

注意,这里有一个路由闭包管理的特殊模块,这里可以处理建设中、错误页、404页等。

VUE前端编程浅谈路由的常见管理模式

实现安全验证

路由的安全验证是业务常见场景,一般的做法是通过引入一个meta属性定义安全条件,如下例:

VUE前端编程浅谈路由的常见管理模式

上例中,要求该路由必须进行安全验证,授权给角色MBTT-ADMIN等,在路由入口中,通过路由的守卫函数机制进行安全验证,如:

VUE前端编程浅谈路由的常见管理模式

传参

vue-router中,可以通过props设置为bool值、对象或函数实现路由传参,具体用法见教程中的说明,之所以在这里提出是因为传参是一个非常重要的场景,要注意props这个对象的使用,它为路由参数的深度管理提供了更多可能。

常见问题

【1】报路由重复错误

如果push或者replace当前路由,vue-router会报“uncaught (in promise) navigationduplicated: avoided redundant navigation to …”的路由重复错误

VUE前端编程浅谈路由的常见管理模式

对于这种不是错误的错误,建议的处置方式是对错误进行捕获单独化处理,如下,我们可以对push和replace的原型进行定制,对于异常捕获进行单独处理。

VUE前端编程浅谈路由的常见管理模式

上例中,我们对异常进行了捕获,系统不再报错。

VUE前端编程浅谈路由的常见管理模式

【2】路由调用页面滚动到顶部

一是vue-router中通过scrollBehavior设置,这里就不再赘述了,另外可以通过守卫函数实现如下:

VUE前端编程浅谈路由的常见管理模式

希望能够对各位前端设计师的设计思路能有些帮助,也欢迎大家随时沟通交流,如有问题,也请不吝赐教。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.moshi6.com/25171.html