yak_handcuffs/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw, } from 'vue-router';
import { usePermissStore } from '../store/permiss';
import { useCommonStore } from '../store/common';
import { useTabsStore } from "@/store/tabs";
import Layout from '@/layout/index.vue';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import m1 from "@/assets/img/m1.png";
import m2 from "@/assets/img/m2.png";
import m3 from "@/assets/img/m3.png";
import m4 from "@/assets/img/m4.png";
import m1_a from "@/assets/img/m1_a.png";
import m2_a from "@/assets/img/m2_a.png";
import m3_a from "@/assets/img/m3_a.png";
import m4_a from "@/assets/img/m4_a.png";

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

      {
        path: '/synthesizeManage',
        name: 'synthesizeManage',
        meta: { tabs: ['综合管理中心'], icon: m4, activeIcon: m4_a, },
        children: [
          {
            path: '/synthesizeManage/deviceManage',
            name: 'deviceManage',
            component: () => import('@/views/synthesizeManage/deviceManage/index.vue'),
            meta: { tabs: ['综合管理中心', '设备管理'], }
          },
          {
            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: ['综合管理中心', '人员管理'] }
          },
          {
            path: '/synthesizeManage/areaManage',
            name: 'areaManage',
            component: () => import('@/views/synthesizeManage/areaManage/index.vue'),
            meta: { tabs: ['综合管理中心', '辖区管理'] }
          },
        ]
      },
    ]
  },
  {
    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 comm = useCommonStore();
  const tab = useTabsStore();
  tab.setTabsItem(to.meta.tabs);
  comm.setTime()

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

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

export default router;