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

- 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完整代码:
html
<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>