首页 > 解决方案 > 为什么我不能在 vue-router routes.js 中使用 require?

问题描述

使用 vue-router 时,标准设置是

main.js 需要 routes.js 文件,它看起来像这样

//routes.js
import Register from './components/Register'
import Login from './components/Login'

module.exports = [{
            path: `/`,
            component: Login,
        }, {
            path: `/register`,
            component: Register,
        }]

我的问题是为什么我可以这样做

//routes.js
module.exports = [{
            path: `/`,
            component: require('./components/Login'),
        }, {
            path: `/register`,
            component: require('./components/Register'),
        }]

当我尝试时,我收到此控制台错误

Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

标签: javascriptvue.jsimportvue-routerrequire

解决方案


**import 和 require 的工作方式不同,请参阅下面的链接,那里有关于该主题的良好文档。** es6 特性要求实际工作 原理 **查看文档 node js 如何在后台工作 module.export 如何工作 nodejs 设计模式是什么(node js 如何将我们的代码包装在立即调用的函数表达式中并将代码传递给 v8 引擎)

你可以简单地 midify 你的 routes.js 文件

component:() => import('./components/Register.vue') 或 component: require('./components/Login.vue').default

两者都可以

[{ path: '/', component:() => import('./components/Register.vue') }, { path: '/register', component: require('./components/Login.vue') 。默认 }];


推荐阅读