当前位置: 首页 > news >正文

若依框架免登陆、页面全屏显示、打开新标签页(看板大屏)

  • 效果如下(先演示的是正常情况下,系统需要登陆,页面正常会显示左边栏和上边栏;接着是看板页面在新标签页打开且全屏显示;最后是直接输对应页面的路由免登陆进来的效果)

  • 1.免登陆:找到项目目录下src/permission.js,在白名单whiteList中添加上你的看板大屏路由地址,这样就不会校验该路由的token(这里我添加的是'/mesBoard/mesqualityboard');

要注意的是此时免登陆进来也会报404,有权限限制,将前端所有权限(v-hasPermi)去掉,后端Controller中的这两个注解:Verify、ActionPermissionFilter去掉即可

  • 2.页面全屏显示:找到项目目录下src/route/index.js,将看板大屏页面配置加到路由constantRoutes中,这样就不会走若依的权限系统(如下图3)加到固定的前端框架中,会将该看板大屏页面以新页面的形式全屏显示,也就去掉了框架的左边栏和上边栏。

  • 3.打开新标签页:找到项目文件路径下src/layout/components/Sidebar/Link.vue文件(这是我项目的文件路径,可能不一样,找到你项目中的Link.vue文件即可),在<script setup></script>标签中新增方法:

function isNewPage(){

  return  props.to==='/mesBoard/mesqualityboard' ;//如果有多个页面需要在新标签页打开,用||分隔路由即可

}

并在linkProps方法中新增判断:

if(isNewPage()){

  return{

    to: props.to,

    target:'_blank',

    rel: 'noopener'

  }

}

Link.vue完整代码:

<template><component :is="type" v-bind="linkProps()"><slot /></component>
</template><script setup>
import { isExternal } from '@/utils/validate'const props = defineProps({to: {type: [String, Object],required: true,},
})const isExt = computed(() => {return isExternal(props.to)
})const type = computed(() => {if (isExt.value) {return 'a'}return 'router-link'
})//需要在新标签页打开的路由
function isNewPage(){return  props.to==='/mesBoard/mesqualityboard' ;//如果有多个页面需要在新标签页打开,用||分隔路由
}function linkProps() {if (isExt.value) {return {href: props.to,target: '_blank',rel: 'noopener',}}//在isNewPage中的路由打开时,在新标签页打开if(isNewPage()){return{to: props.to,target:'_blank',rel: 'noopener'}
}return {to: props.to,}
}
</script>


http://www.mrgr.cn/news/99251.html

相关文章:

  • 从规则到大模型:知识图谱信息抽取实体NER与关系RE任务近10年演进发展详解
  • 单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航的介绍和使用
  • 剑指Offer(数据结构与算法面试题精讲)C++版——day17
  • Transformer系列(三):编码器—解码器架构
  • GAIA-2:用于自动驾驶的可控多视图生成世界模型
  • Rust: 从内存地址信息看内存布局
  • [k8s实战]Containerd 1.7.2 离线安装与配置全指南(生产级优化)
  • STM32的启动方式
  • k8s 基础入门篇之开启 firewalld
  • 240422 leetcode exercises
  • 十三种通信接口芯片——《器件手册--通信接口芯片》
  • 【MySQL】表的约束(主键、唯一键、外键等约束类型详解)、表的设计
  • OpenCV基础函数学习4
  • 超详细mac上用nvm安装node环境,配置npm
  • 2025年世界职业院校技能大赛实施方案(意见稿)
  • V5验证官网滑块验证码WSS协议逆向算法分析
  • Uniapp:view容器(容器布局)
  • Dify忘记管理员密码,重置的问题
  • Spark-SQL(四)
  • 【大模型】Browser-Use AI驱动的浏览器自动化工具