Vue-router typically requires the standard setup as outlined below:
In main.js, the routes.js file is required and it usually contains code similar to this:
//routes.js
import Register from './components/Register'
import Login from './components/Login'
module.exports = [{
path: `/`,
component: Login,
}, {
path: `/register`,
component: Register,
}]
However, I wonder why can't we simplify it like this:
//routes.js
module.exports = [{
path: `/`,
component: require('./components/Login'),
}, {
path: `/register`,
component: require('./components/Register'),
}]
Trying this approach results in a console error message:
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<App> at src/App.vue
<Root>