使用 Vue 3 + Vite 不匹配路由器路径答案

【问题标题】：Router path not matched using Vue 3 + Vite使用 Vue 3 + Vite 不匹配路由器路径
【发布时间】：2023-01-20 19:40:24
【问题描述】：

我正在尝试使用 Vite 创建一个 Vue 3 项目，该项目在进入主页之前检查用户是否使用 AWS Cognito 登录。

这是我的 router.js：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.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', beforeEnter: () => {
      auth.auth.getSession();
    }
  },
  {
    path: '/login*', beforeEnter: async () => {
      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);
      goHome();
    }
  },
  {
    path: '/logout',  beforeEnter: (to, from, next) => {
      auth.logout();
      next();
    }
  }
]

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


function goHome() {
  router.push("/");
}

export default router

当我使用运行项目时npm 运行开发出现以下警告：

[Vue Router 警告]：找不到路径为“/check-login?redirect=/”的位置的匹配项

我尝试手动加载其他路线，例如登录但结果相同。似乎它不识别我的路线（Home除外），可能是因为定义有问题，但我找不到它是什么......

任何的想法？

【问题讨论】：

标签： javascript node.js vuejs3 amazon-cognito vite

【解决方案1】：

才发现哪里不对。我必须在每条路线中都包含一个组件才能被很好地检测到。

我所做的是创建一个只有一个的空白视图路线视图里面。

【讨论】：