Vue3+Vite路由匹配失败求助：AWS Cognito鉴权路由无法识别

1. 路由缺少component定义：Vue Router 4要求每个路由必须指定component（哪怕是一个空占位组件），否则会判定路由无效，触发匹配失败警告。你的/check-login、/login*路由都未设置component。
2. 通配符路由写法错误：Vue Router 4不再支持/login*这种通配符写法，正确的任意子路径匹配语法是/login/:catchAll(.*)。
3. beforeEnter钩子未正确调用next()：/check-login的beforeEnter钩子没有执行next()，会导致路由导航被阻塞，同时缺少组件也会让路由无法正常渲染。

步骤1：创建空占位组件 #

新建EmptyView.vue作为无UI路由的占位组件：

<template></template>
<script setup></script>

步骤2：修正路由配置 #

修改router.js，补充component、修正通配符写法，并确保所有beforeEnter钩子正确调用next()：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 导入空占位组件
import EmptyView from '../views/EmptyView.vue'
import store from '../store';
import auth from '../auth';
import url from 'url'


function requireAuth(to, from, next) {
  if (!auth.auth.isUserSignedIn()) {
    next({
      path: '/check-login',
      query: { redirect: to.fullPath }
    });
  } else {
    console.log("User already logged in");
    if(store.getters.token==null) {
      store.commit('setToken', auth.auth.signInUserSession.getIdToken().jwtToken);
    }
    next();
  }
}

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    beforeEnter: requireAuth
  },
  {
    path: '/check-login',
    component: EmptyView,
    beforeEnter: (to, from, next) => {
      auth.auth.getSession();
      // 自动判断登录状态，跳转到指定页面
      const redirect = to.query.redirect || '/';
      if (auth.auth.isUserSignedIn()) {
        next(redirect);
      } else {
        next();
      }
    }
  },
  {
    // 修正通配符路由写法
    path: '/login/:catchAll(.*)',
    component: EmptyView,
    beforeEnter: async (to, from, next) => {
      let currUrl = window.location.href;
      const queryObject = url.parse(currUrl,true);
      const query = queryObject.hash.replace("#", "").split("&");
      let id_token = "";
      for(let i=0; i<query.length; i++){
        if(query[i].indexOf("id_token")>-1) {
          id_token = query[i];
          id_token = id_token.replace("id_token=", "");
          break;
        }
      }
      if(id_token){
        console.log("Setting token");
        store.commit('setToken', id_token);
      }
      await auth.auth.parseCognitoWebResponse(currUrl);
      next('/');
    }
  },
  {
    path: '/logout',
    component: EmptyView,
    beforeEnter: (to, from, next) => {
      auth.logout();
      next('/');
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

额外优化建议 #

• 避免使用自定义goHome函数，直接用next('/')更符合Vue Router导航逻辑。
• 可在/check-login的getSession回调中处理登录状态，无需停留在空组件页面。

内容的提问来源于stack exchange，提问作者Jordi Gallego