test-web/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Cookies from 'js-cookie'

const routes: RouteRecordRaw[] = [

  {
    path: '/',
    name: 'Login',
    component: () => import('@/views/system/login/Login.vue'),
  },
  {
    path: '/layout/index',
    name: 'Layout',
    component: () => import('@/layout/index.vue'),
    redirect: '/views/home',
    children: [
      {
        path: '/views/home',
        name: 'home',
        meta: { title: '主页', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/system/home/Home.vue'),
        },
      },
      {
        path: '/views/system/menu',
        name: 'menu',
        meta: { title: '菜单模块', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/system/menu/index.vue'),
        },
      },
      {
        path: '/views/fancongcong/advancepaymentaccount',
        name: 'advancepaymentaccount',
        meta: { title: '对公账户打款充值服务', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/advancepaymentaccount/advancepaymentaccount.vue'),
        },
      },
      {
        path: '/views/fancongcong/addsupplyCardBalance',
        name: 'addsupplyCardBalance',
        meta: { title: '储值卡-补交服务 ', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/addsupplyCardBalance/addsupplyCardBalance.vue'),
        },
      },
      {
        path: '/views/fancongcong/cardrechargefix',
        name: 'cardrechargefix',
        meta: { title: '储值卡充值修复服务（圈存修复服务）', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/cardrechargefix/cardrechargefix.vue'),
        },
      },
      {
        path: '/views/fancongcong/cardrefundcostManage',
        name: 'cardrefundcostManage ',
        meta: { title: '注销退费服务', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/cardrefundcostManage/cardrefundcostManage.vue'),
        },
      },
      {
        path: '/views/fancongcong/supplyCardBalance',
        name: 'supplyCardBalance',
        meta: { title: '储值卡-补卡额服务', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/supplyCardBalance/supplyCardBalance.vue'),
        },
      },
      {
        path: '/views/fancongcong/customerservice',
        name: 'customerservice',
        meta: { title: '储值卡充值服务（圈存）', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/customerservice/customerservice.vue'),
        },
      },
      {
        path: '/views/fancongcong/corporateaccountManage/corporateaccountManage',
        name: 'corporateaccountManage',
        meta: { title: '对公账户注册审核服务', isAuth: true }, //用户自定内容
        components: {
          key: () => import('@/views/fancongcong/corporateaccountManage/corporateaccountManage.vue'),
        },
      },
      {
        path: '/views/shengbo/blacklistQuery/blacklistQuery',
        name: 'blacklistQuery',
        meta: { title: '菜单模块', isAuth: true }, //黑名单查询服务
        components: {
          key: () => import('@/views/shengbo/blacklistQuery/blacklistQuery.vue'),
        },
      }, {
        path: '/views/shengbo/trafficFlow/trafficFlow',
        name: 'trafficFlow',
        meta: { title: '菜单模块', isAuth: true }, //通行流水查询服务
        components: {
          key: () => import('@/views/shengbo/trafficFlow/trafficFlow.vue'),
        },
      }, {
        path: '/views/dengmingcong/cardFillDo/cardFillDo',
        name: 'cardFillDo',
        meta: { title: '卡签补办', isAuth: true }, //卡签补办
        components: {
          key: () => import('@/views/dengmingcong/cardFillDo/cardFillDo.vue'),
        },
      }, {
        path: '/views/dengmingcong/cardRenewal/cardRenewal',
        name: 'cardRenewal',
        meta: { title: '卡签续期', isAuth: true }, //卡签续期
        components: {
          key: () => import('@/views/dengmingcong/cardRenewal/cardRenewal.vue'),
        },
      }, {
        path: '/views/dengmingcong/initiativeHangUp/initiativeHangUp',
        name: 'initiativeHangUp',
        meta: { title: '主动挂起服务', isAuth: true }, //主动挂起服务
        components: {
          key: () => import('@/views/dengmingcong/initiativeHangUp/initiativeHangUp.vue'),
        },
      }, {
        path: '/views/dengmingcong/passivityHangUp/passivityHangUp',
        name: 'passivityHangUp',
        meta: { title: '被动挂起服务', isAuth: true }, //被动挂起服务
        components: {
          key: () => import('@/views/dengmingcong/passivityHangUp/passivityHangUp.vue'),
        },
      }, {
        path: '/views/dengmingcong/TABActivate/TABActivate',
        name: 'TABActivate',
        meta: { title: '标签重新激活服务', isAuth: true }, //标签重新激活服务
        components: {
          key: () => import('@/views/dengmingcong/TABActivate/TABActivate.vue'),
        },
      }
    ],
  }
]

const router = createRouter({
  history: createWebHashHistory(), //createWebHistory createWebHashHistory(带#号) 路由模式
  routes,
})

//新增前置路由首位
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) { //是否需要验证权限
    if (Cookies.get('token')) {
      next() //继续往下
    } else {
      next({ name: 'Login' });  //没登录，跳转到login页
    }
  } else {
    next() //继续往下
  }
})

export default router