CODEWITHSUNDEEP
javascriptvue.js
Johan
Johan

Reputation: 35194

Dynamic component selector for all routes in Vue

I would like to set up dynamic routing in Vue, driven by my backend API. The boilerplate that I've looked at suggests using a single component for all routes. A global navigation guard loads the current page data from the API and shows the correct page based on the component name sent from backend:

router.ts

const router = new VueRouter({
  routes: [
    {
      path: '*',
      component: PageSelector
    }
  ],
  mode: 'history'
})

router.beforeEach((to, from, next) => {
  loadModelByUrl(to.fullPath) // load async page data from API
  next()
})

PageSelector.vue

<template>
  <component v-if="model" :is="model.componentName" :key="model.guid"/>
</template>

App.vue

<template>
  <div id="app">
    <div id="nav"></div>
    <router-view />
  </div>
</template>

Are there any obvious downsides using this approach compared to using a more standard route config?

Upvotes: 1

Views: 577

Answers (1)

LastM4N
LastM4N

Reputation: 2230

I think the answer depends on your project requirements.

With the existing setup you lose a wide array of benefits that vue router provides such as props, queries params, children routes, beforeEnter guard and many more.

Although if you have a limited of pages that backend can drive the routing, it's a very clean and dynamic implementation.

From the other side my suggestion would be to register the router page separately because you might need in future any of the router properties and not to mention that working with a team, will help them to understand how project's router pages works

Upvotes: 2

Related Questions