[Vuejs]-Anonymous Component in vue Route

by

1👍

✅

The use of require is obsolete and shouldn’t generally be used without a reason, it can generally be replaced with spec-compatible import. In case of the router it specifically allows for lazy-loaded components provided as asynchronous components. In this case default import doesn’t need to be specified because module object is handled by the framework:

const components = {
    General: () => import("./components/settings/General"),
    ...
}
👤Estus Flask

0👍

I added the .default option to each component in routes.js and it worked

const components = {
    General: require("./components/settings/General").default,
    Account: require("./components/settings/Account").default
}
const vueRoutes = require("../../vue-routes.json");
function assignComponents(routes) {
    return routes.map(route => {
        route.component = components[route.component]
        return route;
    })
}
const assignedRoutes = assignComponents(vueRoutes);
export default assignedRoutes;
👤Gnvt

Leave a comment