Is there a way to dynamically import a vue component based on a path provided in the URL parameters? For example, if <host>/<path> is entered into the browser, I would like to load a vue component located at <path>.vue.
In my routes.js file, I have set up a route to handle nested paths:
{ path: 'object/:catchAll(.*)*', component: BaseObject }
This route redirects to the BaseObject component:
<template>
<div>
<component :is="componentFile" />
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'BaseObject',
data () {
return {
componentPath: '',
address: ''
}
},
methods: {
importComponent (path) {
return () => import(`./${path}.vue`)
}
},
computed: {
componentFile () {
return this.importComponent(this.componentPath)
}
},
created () {
const params = this.$route.params.catchAll
console.log(params)
this.address = params.pop()
this.componentPath = params.join('/')
}
}
</script>
When I go to
http://localhost:8080/#/object/action./action.vue to be loaded. However, instead of loading the component, I am encountering the following errors:
runtime-core.esm-bundler.js?9e79:38 [Vue warn]: Invalid VNode type: undefined (undefined)
at <Anonymous>
at <BaseObject onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <QPageContainer>
at <QLayout view="lHh Lpr lFf" >
at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {$i18n: {…}, $t: ƒ, …} > >
at <RouterView>
at <App>
and
Uncaught (in promise) Error: Cannot find module './.vue'
at app.js:416
Does anyone have a solution for this issue?