init

src/router/base.ts

@@ -0,0 +1,44 @@
+import type { AppRouteRecordRaw } from '@/router/types';
+import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+
+// 404 on a page
+export const ErrorPageRoute: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: Layout,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPageSon',
+      component: ErrorPage,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const RedirectRoute: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: RedirectName,
+  component: Layout,
+  meta: {
+    title: RedirectName,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: RedirectName,
+      component: () => import('@/views/redirect/index.vue'),
+      meta: {
+        title: RedirectName,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};

src/router/constant.ts

@@ -0,0 +1,7 @@
+export const RedirectName = 'Redirect';
+
+export const ErrorPage = () => import('@/views/exception/404.vue');
+
+export const Layout = () => import('@/layout/index.vue');
+
+export const ParentLayout = () => import('@/layout/parentLayout.vue');

src/router/index.ts

@@ -0,0 +1,47 @@
+import type { App } from 'vue';
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { RedirectRoute } from '@/router/base';
+import { createRouterGuards } from './router-guards';
+import { PageEnum } from '@/enums/pageEnum';
+import modules from '@/router/modules'
+
+const RootRoute: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Root',
+    redirect: PageEnum.BASE_HOME_NAME,
+    component: () => import('@/views/project/index.vue'),
+    meta: {
+      title: 'Root',
+    },
+    children: [
+      modules.projectRoutes
+    ]
+  }
+]
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute];
+
+console.log(constantRouter)
+
+const router = createRouter({
+  history: createWebHashHistory(''),
+  routes: constantRouter,
+  strict: true,
+})
+
+export function setupRouter(app: App) {
+  app.use(router);
+  // 创建路由守卫
+  createRouterGuards(router);
+}
+export default router

src/router/modules/index.ts

@@ -0,0 +1,5 @@
+import projectRoutes from './project.router'
+
+export default {
+  projectRoutes
+}

src/router/modules/project.router.ts

@@ -0,0 +1,13 @@
+import { RouteRecordRaw } from 'vue-router';
+
+const projectRoutes: RouteRecordRaw = {
+  path: '/project',
+  name: 'Project',
+  component: () => import('@/views/project/index.vue'),
+  meta: {
+    title: '项目',
+    isRoot: true,
+  }
+};
+
+export default projectRoutes;

src/router/router-guards.ts

@@ -0,0 +1,31 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { Router } from 'vue-router';
+import { ErrorPageRoute } from '@/router/base';
+
+export function createRouterGuards(router: Router) {
+  // 前置
+  router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
+    Loading && Loading.start();
+
+    //添加404
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    if (isErrorPage === -1) {
+      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+    }
+
+    next()
+    Loading && Loading.finish();
+  })
+
+  router.afterEach((to, _, failure) => {
+    document.title = (to?.meta?.title as string) || document.title;
+    const Loading = window['$loading'] || null;
+    Loading && Loading.finish();
+  })
+
+  // 错误
+  router.onError((error) => {
+    console.log(error, '路由错误');
+  });
+}

src/router/types.ts

@@ -0,0 +1,38 @@
+import type { RouteRecordRaw, RouteMeta } from 'vue-router';
+import { defineComponent } from 'vue';
+
+export type Component<T extends any = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>);
+  
+// @ts-ignore
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+  name: string;
+  meta: RouteMeta;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+}
+
+export interface Meta {
+  // 名称
+  title: string;
+  // 是否忽略权限
+  ignoreAuth?: boolean;
+  permissions?: string[];
+  // 是否不缓存
+  noKeepAlive?: boolean;
+  // 是否固定在tab上
+  affix?: boolean;
+  // tab上的图标
+  icon?: string;
+  // 跳转地址
+  frameSrc?: string;
+  // 外链跳转地址
+  externalLink?: string;
+  //隐藏
+  hidden?: boolean;
+}