vue工程中路由导致的循环依赖问题

问题简述

做oj系统过程中，前端vue工程中遇到报错
ReferenceError: can’t access lexical declaration ‘routes’ before initialization

环境

• vite
• vue3
• router中使用外部引入的routes数组

router

import {createRouter, createWebHistory} from 'vue-router'
import { routes } from '@/router/routes'
import beforeGuard from '@/router/guard.ts'


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


/**
 * 路由前置守卫
 */
router.beforeEach(beforeGuard)

export default router

routes

import HomeView from '@/views/baseView/HomeView.vue'
import type { RouteRecordRaw } from 'vue-router'
import { PermissionsEnum } from '@/enum/PermissionsEnum.ts'
import QuestionManager from '@/views/question/QuestionManager.vue'
import DoAnswer from '@/views/question/DoAnswer.vue'
import AnswerQuestion from '@/views/question/AnswerQuestion.vue'
import QuestionSubmitView from '@/views/question-submit/question-submit-view.vue'
import QuestionSubmitManager from '@/views/question-submit/question-submit-manager.vue'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: '首页',
    component: HomeView,
    meta: {
      permissions: [PermissionsEnum.UNLOGIN, PermissionsEnum.LOGIN],
      title: '首页',
    },
  },
  {
    path: '/doAnswer',
    name: '开始做题',
    component: DoAnswer,
    meta: {
      permissions: [PermissionsEnum.UNLOGIN, PermissionsEnum.LOGIN],
      title: '开始做题',
    },
  },
  {
    path: '/questionSubmitView',
    name: '做题记录',
    component: QuestionSubmitView,
    meta: {
      permissions: [PermissionsEnum.UNLOGIN, PermissionsEnum.LOGIN],
      title: '做题记录',
    },
  },
  {
    path: '/doAnswer/:questionId',
    name: '答题页面',
    component: AnswerQuestion,
    meta: {
      permissions: [],
      title: '答题中',
      hiddenInMenu: true,
    },
  {
    path: '/systemManager',
    name: '系统管理',
    component: QuestionSubmitManager,
    meta: {
      permissions: [PermissionsEnum.UNLOGIN, PermissionsEnum.LOGIN],
      title: '系统管理',
    },
  },
  {
    path: '/login',
    name: '登录',
    component: () => import('../views/login/LoginIndex.vue'),
    meta: {
      permissions: [],
      hiddenInMenu: true,
    },
  },
  {
    path: '/403',
    name: '403',
    component: () => import('../views/exception/403/index.vue'),
    meta: {
      permissions: [],
      hiddenInMenu: true,
    },
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/exception/404/index.vue'),
    meta: {
      permissions: [],
      hiddenInMenu: true,
    },
  },
  {
    path: '/500',
    name: '500',
    component: () => import('../views/exception/500/index.vue'),
    meta: {
      permissions: [],
      hiddenInMenu: true,
    },
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    meta: {
      hiddenInMenu: true,
    }
  },
]

问题原因分析

因为在DoAnswer中使用router跳转页面时使用 import router from ‘@/router’,导致产生循环依赖问题。即当router需要初始化时需要导入DoAnswer组件，但是DoAnswer组件中要使用路由，又需要从@/router中导入router实例，因此报错。

解决方案

在DoAnswer组件中使用 const user = useRouter() 方法获取路由实例对象

<script setup lang="ts">
import { onMounted, type Ref, ref } from 'vue'
import { useRouter } from 'vue-router'

// 搜索表单Ref对象
const searchFormRef = ref()

// 路由
const router = useRouter();
</script>
<template>
<button @click="router.push('/home')">跳转</button>
</template>
<style></style>