网站结构分析具体分析内容西安网页设计培训学校

问题简述

做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>