Vue+TS调用AuthCallback组件路由函数时出现初始化前访问错误

问题根源 #

1. 循环依赖：router.ts 直接导入了 AuthCallback 组件，而 AuthCallback 又导入了 router，导致模块初始化顺序冲突——router还未完成初始化，就尝试引用未初始化的AuthCallback组件。
2. 路由实例调用错误：组件中导入的 router 是已创建好的实例对象，不是可调用函数，你写的 router() 属于错误用法，会直接触发报错。
3. 路由路径语法错误：/callback/: 路径的冒号后未指定参数名，属于无效路由配置，会导致路由匹配异常。

分步解决方案 #

1. 修复循环依赖：改用异步组件加载AuthCallback

在 router.ts 中将AuthCallback改为异步加载，避免初始化阶段的循环引用：

import { createRouter, createWebHistory } from 'vue-router'
import main from '../layout/main-layout.vue'
import Profile from '../components/user/user-profile/user-profile.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'main',
      component: main
    },
    {
      path: '/callback', // 去掉无效冒号，若需参数可改为/callback/:paramName
      name: 'AuthCallback',
      // 异步加载组件，解决循环依赖
      component: () => import('../components/user/user-interact/user-callback.vue')
    },
    {
      path: '/id/:userId', // 修正原笔误usedId为userId
      name: 'Profile',
      component: Profile
    }
  ]
})

export default router

2. 修正组件中的路由使用逻辑

在 user-callback.vue 中直接使用路由实例的 push 方法跳转，同时完善空值判断避免报错：

<script lang="ts">
import { useRoute } from 'vue-router';
// 导入路由实例，无需加()调用
import router from '../../../router/index.ts';
import { store } from '../../../stores/userState.ts'

export default {
    name: 'AuthCallback',
    mounted() {
        const tokenParseRegex: RegExp = /access_token=(.*?)&/;
        const idParseRegex: RegExp = /user_id=(.*?)$/;
        const route = useRoute(); // 提前获取route实例，避免重复调用
        const exAccessToken = route.hash.match(tokenParseRegex);
        const exUserId = route.hash.match(idParseRegex);

        // 严谨判断空值，避免运行时错误
        if (exAccessToken?.[1] && exUserId?.[1]) {
            const userStore = store();
            userStore.userState.accessToken = exAccessToken[1];
            userStore.userState.userId = exUserId[1];
            userStore.userState.isAuthorized = true;
            
            // 跳转到个人资料页，参数名与路由配置保持一致
            router.push({ name: 'Profile', params: { userId: exUserId[1] } });
        }
    }   
}
</script>

3. 额外优化提示

• 避免使用!强制非空断言，改用可选链?.和存在性判断，减少空值报错风险。
• 确保路由路径参数名与跳转时传入的参数名完全一致，避免路由匹配失败。

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