时间戳

首页 > 解决方案 > Vue Router 似乎不喜欢函数调用

javascript - Vue Router 似乎不喜欢函数调用

问题描述

在我的router/index.js中，我正在尝试延迟加载路线。如果我对它正在工作的字符串进行硬编码，但如果我使用函数（如图所示）调用将该文件路径作为字符串值获取，它会在控制台中显示错误 - Error: Cannot find module '../views/Login/Login.vue'。我正在使用 Vue 2.6.11 和 Vue-router 3.5.1。

我哪里错了？

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// const filePath = (filename, foldername) => '../views/' + foldername + "/" + filename + '.vue'


const routes = [
    {
        path: '/',
        name: 'Login',

        // THIS WORKS
        component: () => import('../views/Login/Login.vue')

        // THIS DOES NOT, EVEN THOUGH IT IS GETTING THE EXACT SAME VALUE
        // component: () => import(filePath('Login', 'Login'))
    },
]

const router = new VueRouter({
    routes
})

export default router

标签： javascriptvue.jsvuejs2vue-router

解决方案

如果你想延迟加载一个路由，它必须是静态可分析的，像这样：

component: () => import('../views/Login/Login.vue')

在您的其他尝试中：

component: () => import(filePath('Login', 'Login'))

构建工具（可能是 webpack）不能静态分析导入。构建工具负责识别哪些代码正在被使用，哪些代码没有被使用（这称为 tree-shaking）。由于它无法解析实际的导入（它只能在运行时才能返回，因为filePath它可以返回任何东西），它认为 vue 文件永远不会被引用，应该从构建中删除。

如果您的实际构建工具是 webpack，则必须遵循此处描述的 webpack 说明：https ://webpack.js.org/api/module-methods/#dynamic-expressions-in-import其中指出可以进行动态导入当它们具有可静态分析的模式时（例如：模板文字）

推荐阅读