shop-web/src/router/index.ts

import type { RouteRecordRaw } from "vue-router"
import { registerNavigationGuard } from "@/router/guard"
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

const VITE_PUBLIC_PATH = import.meta.env.VITE_PUBLIC_PATH

const VITE_ROUTER_HISTORY = import.meta.env.VITE_ROUTER_HISTORY

/** 系统页面 */
export const systemRoutes: RouteRecordRaw[] = [
  {
    path: "/403",
    component: () => import("@/pages/error/403.vue"),
    name: "403",
    meta: {
      title: "403"
    }
  },
  {
    path: "/404",
    component: () => import("@/pages/error/404.vue"),
    name: "404",
    meta: {
      title: "404"
    },
    alias: "/:pathMatch(.*)*"
  }
]

/** 业务页面 */
export const routes: RouteRecordRaw[] = [
  {
    path: '/order-success',
    name: 'OrderSuccess',
    component: () => import('@/pages/order/Success.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/order-list',
    name: 'OrderList',
    component: () => import('@/pages/order/components/OrderList.vue'),
    meta: {
      title: '订单列表',
      requiresAuth: true
    }
  },
  {
    path: '/order/:id',
    name: 'OrderDetail',
    component: () => import('@/pages/order/index.vue'),
    meta: {
      title: '订单详情',
      requiresAuth: true
    }
  },
  {
    path: "/product/checkout",
    component: () => import("@/pages/product/components/checkout.vue"),
    name: "Checkout",
    meta: {
      title: "订单结算"
    }
  },
  {
    path: "/",
    component: () => import("@/pages/product/ProductList.vue"),
    name: "ProductList",
    meta: {
      title: "商品列表",
      keepAlive: true,
      layout: {
        navBar: {
          showNavBar: false,
          showLeftArrow: false
        },
        tabbar: {
          showTabbar: true,
          icon: "home-o"
        }
      }
    }
  },
  {
    path: "/me",
    component: () => import("@/pages/me/index.vue"),
    name: "Me",
    meta: {
      title: "我的",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: false
        },
        tabbar: {
          showTabbar: true,
          icon: "user-o"
        }
      }
    }
  }
]

/* export const routes: RouteRecordRaw[] = [
  {
    path: '/order-success',
    name: 'OrderSuccess',
    component: () => import('@/pages/order/Success.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/order/:id',
    name: 'OrderDetail',
    component: () => import('@/pages/order/index.vue'),
    meta: {
      title: '订单详情',
      requiresAuth: true
    }
  },
  {
    path: "/login",
    component: () => import("@/pages/login/index.vue"),
    name: "Login",
    meta: {
      title: "登录"
    }
  },
  {
    path: "/",
    component: () => import("@/pages/home/index.vue"),
    name: "Home",
    meta: {
      title: "首页",
      layout: {
        navBar: {
          showNavBar: false,
          showLeftArrow: false
        },
        tabbar: {
          showTabbar: true,
          icon: "home-o"
        }
      }
    }
  },
  {
    path: "/me",
    component: () => import("@/pages/me/index.vue"),
    name: "Me",
    meta: {
      title: "我的",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: false
        },
        tabbar: {
          showTabbar: true,
          icon: "user-o"
        },
        footer: true
      }
    }
  },
  {
    path: '/order-list',
    name: 'OrderList',
    component: () => import('@/pages/order/OrderList.vue'),
    meta: {
      title: '订单列表',
      requiresAuth: true
    }
  }
]

// 示例页面
export const demoRoutes: RouteRecordRaw[] = [
  {
    path: "/product",
    component: () => import("@/pages/product/ProductList.vue"),
    name: "ProductList",
    meta: {
      title: "商品列表",
      keepAlive: true,
      layout: {
        navBar: {
          showNavBar: false,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/keep-alive",
    component: () => import("@/pages/demo/keep-alive.vue"),
    name: "KeepAlive",
    meta: {
      title: "路由缓存",
      keepAlive: true,
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/watermark",
    component: () => import("@/pages/demo/watermark.vue"),
    name: "Watermark",
    meta: {
      title: "带防御的水印",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/permission",
    component: () => import("@/pages/demo/permission.vue"),
    name: "Permission",
    meta: {
      title: "按钮级权限",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/no-permission-page",
    component: () => {},
    name: "NoPermissionPage",
    meta: {
      title: "因无权限而进不去的页面",
      roles: ["SuperAdmin"]
    }
  },
  {
    path: "/color",
    component: () => import("@/pages/demo/color.vue"),
    name: "Color",
    meta: {
      title: "灰色模式、色弱模式",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: '/order-list',
    name: 'OrderList',
    component: () => import('@/pages/order/OrderList.vue'),
    meta: {
      title: '订单列表',
      requiresAuth: true
    }
  }
]
 */
/** 空示例页面 */
/* export const emptyDemoRoutes: RouteRecordRaw[] = [
  {
    path: "/i18n",
    component: () => import("@/pages/demo/i18n.vue"),
    name: "I18n",
    meta: {
      title: "国际化 / 多语言",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/markdown",
    component: () => import("@/pages/demo/markdown.vue"),
    name: "Markdown",
    meta: {
      title: "Markdown 解析",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: "/chart",
    component: () => import("@/pages/demo/chart.vue"),
    name: "Chart",
    meta: {
      title: "图表",
      layout: {
        navBar: {
          showNavBar: true,
          showLeftArrow: true
        }
      }
    }
  },
  {
    path: '/order-list',
    name: 'OrderList',
    component: () => import('@/pages/order/OrderList.vue'),
    meta: {
      title: '订单列表',
      requiresAuth: true
    }
  }
] */

/** 路由实例 */
export const router = createRouter({
  history: VITE_ROUTER_HISTORY === "hash" ? createWebHashHistory(VITE_PUBLIC_PATH) : createWebHistory(VITE_PUBLIC_PATH),
  routes: [...systemRoutes, ...routes]
})

// 注册路由导航守卫
registerNavigationGuard(router)