When working with Vuejs 3, I am interested in using the render() function to generate a VNode, where I can pass a Vue Component that changes based on the current route.
In my use of vite.js, I have encountered difficulty importing a component dynamically within my computed function for ViewComponent.
Previously, in webpack, I could easily achieve this with
return require(`./pages/${matchingPage}.vue`).defaultvitejs, utilizing this method results in a Require is not a function error.
I experimented with
return import(`./pages/${matchingPage}.vue`)Promise instead of a direct Component.
//main.js
import {createApp, h} from 'vue'
import routes from './routes'
const SimpleRouterApp = {
data: () => ({
currentRoute: window.location.pathname
}),
computed: {
ViewComponent () {
const matchingPage = routes[this.currentRoute] || '404'
return import(`./pages/${matchingPage}.vue`)
}
},
render () {
return h(this.ViewComponent)
},
created () {
window.addEventListener('popstate', () => {
this.currentRoute = window.location.pathname
})
}
}
createApp(SimpleRouterApp).mount('#app')
I am seeking alternative methods to enable render() to dynamically return a Vue Component. Any suggestions?