I am facing an issue with vue-router while trying to register components dynamically. When I use hardcoded code, the router functions properly. However, when I load my routes dynamically, it fails to render the component.
The component file is being imported dynamically:
GetAllPages((data) => {
let pages = [];
data.map(page => {
const pageTitle = page.title.rendered.toLowerCase();
import(`../pages/${pageTitle}.js`).then(module => {
pages.push({
path: `/${pageTitle}`,
name: `${pageTitle}`,
component: module.default
})
})
})
return pages;
})
Here is the router function:
new VueRouter({
mode: 'history',
// routes: pages <= not registering data
routes: [
{path: '/about', component: About} // <= working fine
]
});
The dynamically imported file looks like this:
let AboutPage = {
data: () => ({
Message: "hey"
}),
render: () => {
return "<h1>{{Message}}</h1>";
}
}
export default Vue.component("About", {
data: AboutPage.data,
template: AboutPage.render()
})
The issue lies in the fact that while hardcoded routes work, dynamically imported pages do not. Even if I manually define the imports within the data.map function, the page does not render. Strangely, there are no errors displayed by the router in the console.
Note: If I log the router instance, I can see that the dynamically imported routes are set, but they are not rendering HTML.