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

• 效果如下（先演示的是正常情况下，体系必要登陆，页面正常会显示左边栏和上边栏；接着是看板页面在新标签页打开且全屏显示；末了是直接输对应页面的路由免登陆进来的效果）
  

• 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完备代码：

1. <template>
2.   <component :is="type" v-bind="linkProps()">
3.     <slot />
4.   </component>
5. </template>
7. <script setup>
8. import { isExternal } from '@/utils/validate'
10. const props = defineProps({
11.   to: {
12.     type: [String, Object],
13.     required: true,
14.   },
15. })
17. const isExt = computed(() => {
18.   return isExternal(props.to)
19. })
21. const type = computed(() => {
22.   if (isExt.value) {
23.     return 'a'
24.   }
25.   return 'router-link'
26. })
28. //需要在新标签页打开的路由
29. function isNewPage(){
30.   return  props.to==='/mesBoard/mesqualityboard' ;//如果有多个页面需要在新标签页打开，用||分隔路由
31. }
33. function linkProps() {
34.   if (isExt.value) {
35.     return {
36.       href: props.to,
37.       target: '_blank',
38.       rel: 'noopener',
39.     }
40.   }
41.   //在isNewPage中的路由打开时，在新标签页打开
42.   if(isNewPage()){
43.   return{
44.     to: props.to,
45.     target:'_blank',
46.     rel: 'noopener'
47.   }
48. }
50.   return {
51.     to: props.to,
52.   }
53. }
54. </script>

复制代码