bk-vue/src/router/index.ts

import { aboutIcon, homeIcon, friendIcon, archiveIcon } from '@/assets/icons';
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import type { RouteComponent } from 'vue-router';

interface BlogModule {
  routeName: string;
  routeUrl: string;
  title: string;
  iconTemplate?: string;
  description?: string;
  component: RouteComponent;
  showInMenu: boolean;
}

export const modules: BlogModule[] = [
  {
    routeName: "home",
    title: "主页",
    routeUrl: "/",
    iconTemplate: homeIcon.template,
    component: () => import("../views/PostView.vue"),
    showInMenu: true
  },
  {
    routeName: "archives",
    title: "归档",
    routeUrl: "/archives",
    iconTemplate: archiveIcon.template,
    component: () => import('../views/ArchivesView.vue'),
    showInMenu: true
  },
  {
    routeName: "about",
    title: "关于",
    routeUrl: "/about",
    iconTemplate: aboutIcon.template,
    component: () => import('../views/AboutView.vue'),
    showInMenu: true
  },
  {
    routeName: "friend",
    title: "友链",
    routeUrl: "/friend",
    iconTemplate: friendIcon.template,
    component: () => import('../views/FriendLinkView.vue'),
    showInMenu: true
  },
  {
    routeName: "detail",
    title: "博文详情",
    routeUrl: "/detail",
    component: () => import('../views/PostDetailView.vue'),
    showInMenu: false
  },
  {
    routeName: "editor",
    title: "编辑博文",
    routeUrl: "/editor",
    component: () => import('../views/PostEditView.vue'),
    showInMenu: false
  }
];

function toRouteRecordRaw(target: BlogModule): RouteRecordRaw {
  return {
    path: target.routeUrl,
    name: target.routeName,
    component: target.component
  }
}

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: modules.map(toRouteRecordRaw)
});