my-bigScreen/screen-vue/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '@/views/Login.vue'
import Page404 from '@/views/error/404.vue'
import Layout from '@/components/Layout/index.vue'
import Dashboard from '@/views/desktop/index.vue'
import BigScreen from '@/views/screen/index.vue'
import BigScreenWork from '@/views/screen/Work/index.vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const bigScreenModules = import.meta.glob('../views/screen/**/{index,list}.vue', { 
  eager: false,
  import: 'default'
})

const generateBigScreenRoutes = () => {
  const routes = []
  
  Object.entries(bigScreenModules).forEach(([filePath, module]) => {
    if (filePath === '../views/screen/index.vue') return;

    const routePath = filePath
      .replace('../views', '')
      .replace('.vue', '')
      .toLowerCase();
  
    const finalPath = routePath;
    const routeName = finalPath
      .split('/')
      .filter(Boolean)
      .map(seg => seg.charAt(0).toUpperCase() + seg.slice(1))
      .join('')
      || 'SystemRoleIndex';
  
    routes.push({
      path: finalPath,
      name: routeName,
      component: module,
      meta: { requiresAuth: true }
    })
  })
  
  return routes
}

const modules = import.meta.glob('../views/**/{index,list}.vue', { 
  eager: false,
  import: 'default'
})

const generateRoutes = () => {
  const routes = []
  
  Object.entries(modules).forEach(([filePath, module]) => {
    const excludePaths = [
      'views/Login.vue',
      'views/desktop/index.vue',
      'views/error/',
      'views/screen/',
    ]        
    if (excludePaths.some(path => filePath.includes(path))) {
      return
    }

    const routePath = filePath
      .replace('../views', '')
      .replace('.vue', '')
      .toLowerCase()

    const routeName = routePath
      .split('/')
      .filter(Boolean)
      .map(seg => seg.charAt(0).toUpperCase() + seg.slice(1))
      .join('')

    routes.push({
      path: routePath,
      name: routeName || 'SystemRoleIndex',
      component: module,
      meta: { requiresAuth: true }
    })
  })
  
  return routes
}

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { isPublic: true }
  },
  {
    path: '/bigScreen',
    name: 'BigScreen',
    component: BigScreen,
    meta: { requiresAuth: true },
    children: [
      {
        path: '/bigScreenWork',
        name: 'BigScreenWork',
        component: BigScreenWork
      },
      ...generateBigScreenRoutes(),
      {
        path: '/:pathMatch(.*)*',
        name: 'BigScreen404',
        component: Page404
      }
    ]
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/layout',
    component: Layout,
    meta: { requiresAuth: true },
    children: [
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard
      },
      ...generateRoutes(),
      {
        path: '/:pathMatch(.*)*',
        name: 'Layout404',
        component: Page404
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'Page404',
    component: () => import('@/views/error/404.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL || './'),
  routes,
  scrollBehavior() {
    return { top: 0 }
  }
})

router.beforeEach((to, from, next) => {
  if (to.meta.isPublic) {
    next()
    return
  }

  const userStore = useUserStore()
  try {
    if (userStore.isLoggedIn()) {
      next()
    } else {
      ElMessage.warning('请先登录后再操作！')
      next({ 
        path: '/login', 
        query: { redirect: to.fullPath },
        replace: true
      })
    }
  } catch (error) {
    console.error('路由守卫校验失败：', error)
    ElMessage.error('登录状态校验失败，请重新登录！')
    next({ 
      path: '/login', 
      replace: true 
    })
  }
})

export default router