Vue+TS 初始化前无法访问*？

Question

当我在 AuthCallback 组件中调用 router 函数时，出现错误 Cannot access 'AuthCallback' before初始化，这是怎么回事？我需要的功能是 - 当用户登录时，他会被转移到回调页面，然后立即转移到个人资料页面，但这是我尝试连接路由器时收到的错误

路由器.ts

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import main from '../layout/main-layout.vue'
import AuthCallback from '../components/user/user-interact/user-callback.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/:',
      name: 'AuthCallback',
      component: AuthCallback
    },
    {
      path: '/id/:usedId',
      name: 'Profile',
      component: Profile
    }
  ]
})

export default router

用户回调.vue

<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 exAccessToken: RegExpMatchArray | null = useRoute().hash.match(tokenParseRegex);
            const exUserId: RegExpMatchArray | null = useRoute().hash.match(idParseRegex);
            if (exAccessToken![1] !== null) {
                store().userState.accessToken = exAccessToken![1];
                store().userState.userId = exUserId![1];
                store().userState.isAuthorized = true;
            } else {
                return
            }
            if (store().userState.accessToken !== null) {
                    console.log(router()) // if i remove this line - all be fine
            }
        }   
    }
</script>

Answer 1

1. 正如文档https://router.vuejs.org/guide/essentials/navigation.html中提到的：

在 Vue 实例内部，您可以通过 $router 访问路由器实例。因此，您可以调用 this.$router.push。

因此，在您的中user-callback.vue，无需导入router/index.ts，只需调用this.$router.push('/something')

2. 或者，您可以使用useRouter()：

import { useRouter } from 'vue-router';
const router = useRouter(); 

router.push('/something')