Vue项目不通过左侧菜单新建tab页签,且页签名称可动态更改

项目需求:点击查询列表操作栏按钮时,新建tab页签(可移除),tab页签的名称须根据操作栏按钮名称对应显示。如:点击“查看”时,新建页签名称为“查看”,点击“审核”时,新建页签名称为“审核”。原“查看”和“审核”页签是同一页面,只需要更改tab页签名称即可。

效果图


实现逻辑

    1.一般来说右侧tab页签是根据用户点击左侧菜单显示出来的,而左侧菜单是在菜单管理页面进行配置的。不通过菜单配置,新建tab页签的实现就需要从router里入手。将新建页签作为主视图的子级进行配置即可。

    2.动态更改tab页签的名称,需要用到boforeEnter路由守卫来实现

实现步骤

    


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容