Static GitHub Issues

[663] Wildcard route - load component dynamically

prev: ElementUI Vue Components Rendering Issues
next: Memory leak

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?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c574">#c574</a>)</em></sub></div>