Hi guys, I'm trying to accomplish full wildcard routing as my routes are generated by a CMS so I have an API that takes a route and will return some data about the page and which component to use for rendering so a request to /api/content/getcontent?route=/work
gives me back
{
"id": 1068,
"name": "Work",
"component": "work"
}
then I have created a _.vue
file to catch all routes with the following code (my first vue app, be gentle)
<template>
<div>
<h1>{{page.name}} - {{page.id}}</h1>
</div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
async fetch ({ store, route, redirect }) {
try {
const pageRes = await axios.get(`xxx/api/content/getcontent?route=${route.path}`)
store.commit('page', pageRes.data)
} catch (err) {
redirect('/404')
}
},
computed: {
...mapState({
page: state => state.page
})
}
}
</script>
so now all I want to do is use the result of state.page.component
to find a component with that name and render it. Can someone please help?