Vue Router动态加载路由报错：无法解析模块标识符

问题现象 #

通过Gunicorn后端接口获取动态路由，菜单可正常渲染，但点击路由链接时触发错误：

TypeError: Failed to resolve module specifier '@/components/DashBoard/DashBoard.vue'
at eval (eval at aFetchMenus (store.js:135:18), <anonymous>:1:7)
at extractComponentsGuards (vue-router.mjs:2071:40)
at vue-router.mjs:3260:22

Pinia中预定义的Login路由可正常工作，动态路由加载后菜单显示正常，但跳转失败。

核心原因 #

后端返回的component字符串通过eval执行后，模块解析器无法识别@别名（该别名是Vue项目构建工具配置的路径别名，运行时eval环境不具备该解析能力），导致无法正确定位组件文件。同时原Pinia配置存在action拼写错误，导致动态路由逻辑无法正确注册。

解决方案 #

1. 后端返回组件路径标识而非完整导入语句 #

修改Gunicorn接口代码，只返回组件的相对路径（基于项目src目录），而非带import的函数字符串：

@app.route("/api/menus", methods=['GET'])
def menus():
    routes = [
        {
        "path": "/dashboard",
        "name": "Dashboard",
        "component": "@/components/DashBoard/DashBoard.vue",
        }
    ]
    return json.dumps(routes)

2. 前端动态构建组件导入函数 #

在Pinia仓库中，直接使用import()函数处理后端返回的路径，避免eval，同时修正action拼写错误：

import { defineStore } from 'pinia'

export const useRoutesStore = defineStore('routesStore', {
    state: () => {
        return {
            routes: [
                {
                    path: '/login',
                    name: 'Login',
                    component: () => import('@/components/LogIn/LogIn.vue')
                }
            ],
        }
    },
    actions: { // 修正拼写：action → actions
        async aFetchMenus(router) {
            const res = await fetch('https://server/api/menus')
            if (res.ok) {
                const arr = await res.json()
                for (const route of arr) {
                    const r = {
                        path: route.path,
                        name: route.name,
                        component: () => import(route.component) // 直接用import处理路径
                    }
                    router.addRoute(r)
                    this.routes.push(r)
                }
            }
        }
    }
})

3. 菜单组件路由数据来源修正 #

菜单组件直接导入routes无法获取动态添加的路由，改为从Pinia仓库获取实时路由数据：

<template>
    <nav class="navbar navbar-light navbar-expand-md py-3">
        <div id="navcol-1" class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item" v-for="(route, index) of routesStore.routes" :key="index">
                    <router-link class="nav-link" :to="route.path">{{ route.name }}</router-link>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script setup>
import { useRoutesStore } from '@/stores/routesStore'
const routesStore = useRoutesStore()
</script>

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