编写对应vue文件

login.vue

<template>
... // 登录组件
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { postUserLogin } from '@/api/controller/UserController';
import router from '@/router';
import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
  
const route = useRoute()

/**
 * 按钮loading
 */
const loading = ref<boolean>(false);

const formState = reactive<UserLoginRequest>({
  userAccount: '',
  userPassword: '',
});


/**
 * 登录
 */
 function onSubmit() {
	loading.value = true;
	 postUserLogin(formState).then((res:any) => {
		 if (res.code === 0) {
			 localStorage.setItem('token', res.data.token);
			 const query: LocationQuery = route.query;
			const redirect = (query.redirect as LocationQueryValue) ?? "/";
			const otherQueryParams = Object.keys(query).reduce(
				(acc: any, cur: string) => {
					if (cur !== "redirect") {
						acc[cur] = query[cur];
					}
					return acc;
				},
				{}
			);

			 router.push({ path: redirect, query: otherQueryParams }).then(() => { 
					message.success('登录成功');
					loading.value = false;
			 })
			
		}
	}).catch((err) => {
		loading.value = false;
	});
}

</script>

redirect.vue

<template>
  <div ></div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const { params, query } = route;
const { path } = params;

router.replace({ path: '/' + path, query });
</script>

router.js定义路由

{
    path: '/login',
    name: 'Login',
    component: () => import('@/views/gen/login/index.vue')
  },
  {
    path: "/redirect/:path(.*)",
    component: () => import("@/views/gen/redirect/index.vue"),
  },

路由守卫使用

import router from "@/router";

// 白名单路由
const whiteList = ["/login"];

router.beforeEach(async (to, from, next) => {
    const hasToken = localStorage.getItem("token");
    if (hasToken) {
        if (to.path === "/login") {
            next({ path: "/" });
        } else {
            // 未匹配到任何路由，跳转404
            if (to.matched.length === 0) {
                from.name ? next({ name: from.name }) : next("/404");
            } else {
                next();
            }
        }
       
    } else {
        // 未登录可以访问白名单页面
        if (whiteList.indexOf(to.path) !== -1) {
            next();
        } else {
            next(`/login?redirect=${to.path}`);
           
        }
    }
});