前后端分离项目,前端Vue菜单路由配置方案

323 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第19天,点击查看活动详情

1、一级菜单resource.resourceUrl为Layout,resource.resourcePageName: 一级菜单配置为RouteView,二级菜单配置为PageView, PageView显示标签头,默认为RouteView。

2、二级菜单和包含子菜单resource.resourceUrl 为nested

3、以https:// 和http:// 开头的resource.resourcePath为跳转外站链接

4、关于子路由嵌套问题:

  比如一个数据表格页面是父页面parent,然后编辑或者新建是打开新页面child,新页面child作为数据表格页面路由parent的子路由页面。此时,如果在父页面parent数据表格页面不添加的话,子页面编辑页面child是不会显示的,当把数据表格父页面parent和编辑页面child作为同级路由时,是可以展示的。

  如果选择在父页面parent添加,那么显示需要修改样式,用显示的子页面child的内容来覆盖掉父页面parent的内容。

  还有一种方式,是新建一个父页面super当做,然后数据表格父页面parent和编辑子页面child作为同级子页面,父页面super默认跳转到父页面parent,就可以实现,子页面child覆盖父页面parent的效果。

  这里需要修改动态路由跳转方式:判断当前路由请求的路径resource.resourceUrl是否是子路由resourcePath中的其中一个,如果是其中一个,那么也是父级路由。

5、关于前端路由控制:

  在配置路由菜单时,首先按功能区分:系统 ->子系统 ->功能模块 ->菜单、按钮(跳转链接)、接口。

  功能模块设置为Layout(AntDesign中为RouterView等等),菜单有嵌套父菜单,不进行任何跳转,子菜单进行跳转。还有嵌套菜单,是进入页面后再进行其他跳转,这时,需要设置一个通用父菜单,嵌套父菜单和子菜单属于同一级才能正常进行跳转。