yak_handcuffs/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw, } from 'vue-router';
import { usePermissStore } from '../store/permiss';
import { useTabsStore } from "@/store/tabs";
import Layout from '@/layout/index.vue';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Layout,
    redirect: '/statisticalCenter',
    children: [
      {
        path: '/statisticalCenter',
        name: 'statisticalCenter',
        component: () => import('@/views/statisticalCenter/index.vue'),
        meta: { tabs: ['统计中心'], icon: 'el-icon-set-up' }
      },
      {
        path: '/monitoringCenter',
        name: 'monitoringCenter',
        component: () => import('@/views/monitoringCenter/index.vue'),
        meta: { tabs: ['监控中心'], icon: 'el-icon-set-up' }
      },
      {
        path: '/alarmCenter',
        name: 'alarmCenter',
        component: () => import('@/views/alarmCenter/index.vue'),
        meta: { tabs: ['告警中心'], icon: 'el-icon-set-up' },
      },
      {
        path: '/incidentDispose',
        name: 'alarmCenter/incidentDispose',
        component: () => import('@/views/incidentDispose/index.vue'),
        meta: { tabs: ['告警中心', '处理事件'], icon: 'el-icon-set-up', hideMenu: true, }
      },

      {
        path: '/synthesizeManage',
        name: 'synthesizeManage',
        meta: { tabs: ['综合管理中心'], icon: 'el-icon-school' },
        children: [
          {
            path: '/synthesizeManage/deviceManage',
            name: 'deviceManage',
            component: () => import('@/views/synthesizeManage/deviceManage/index.vue'),
            meta: { tabs: ['综合管理中心', '设备管理'], icon: 'el-icon-set-up' }
          },
          {
            path: '/synthesizeManage/deviceInfo',
            name: 'deviceManage/deviceInfo',
            component: () => import('@/views/synthesizeManage/deviceInfo/index.vue'),
            meta: { tabs: ['综合管理中心', '设备管理', '详细信息'], hideMenu: true, }
          },
          {
            path: '/synthesizeManage/setting',
            name: 'deviceManage/setting',
            component: () => import('@/views/synthesizeManage/setting/index.vue'),
            meta: { tabs: ['综合管理中心', '设备管理', '专项设置'], hideMenu: true, }
          },
          {
            path: '/synthesizeManage/mapLocation',
            name: 'deviceManage/mapLocation',
            component: () => import('@/views/synthesizeManage/mapLocation/index.vue'),
            meta: { tabs: ['综合管理中心', '设备管理', '地图位置'], hideMenu: true, }
          },
          {
            path: '/synthesizeManage/userManage',
            name: 'userManage',
            component: () => import('@/views/synthesizeManage/userManage/index.vue'),
            meta: { tabs: ['综合管理中心', '人员管理'], icon: 'el-icon-set-up' }
          },
          {
            path: '/synthesizeManage/areaManage',
            name: 'areaManage',
            component: () => import('@/views/synthesizeManage/areaManage/index.vue'),
            meta: { tabs: ['综合管理中心', '辖区管理'], icon: 'el-icon-set-up' }
          },
        ]
      },
    ]
  },
  {
    path: '/login',
    meta: {
      title: '登录',
      noAuth: true,
    },
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/403',
    meta: {
      title: '没有权限',
      noAuth: true,
    },
    component: () => import('@/views/403.vue'),
  },
  {
    path: '/404',
    meta: {
      title: '找不到页面',
      noAuth: true,
    },
    component: () => import('@/views/404.vue'),
  },
  { path: '/:path(.*)', redirect: '/404' },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to, from, next) => {

  NProgress.start();
  const permiss = usePermissStore();
  const tab = useTabsStore();
  tab.setTabsItem(to.meta.tabs);

  if (typeof to.meta.permiss == 'string' && !permiss.key.includes(to.meta.permiss)) {
    // 如果没有权限，则进入403
    next('/403');
  } else {
    next();
  }
});

router.afterEach(() => {
  NProgress.done();
});

export default router;