CODEWITHSUNDEEP
vue.jsvuejs2vue-router
sazr
sazr

Reputation: 25938

Dynamically assign component to routes

Is it possible to have dynamic routes? For example; we get the request mywebsite.com/foo-bar and the router checks if the component FooBar exists and assigns that component or if it doesn't exist it assigns a default component BasePage.

For example:

import * as pages from '../components/pages'

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/:slug',
      component: (!_.isNull(pages[slug]) ? pages[slug] : BasePage,
      props: true
    },
  ]
  ...
});

Upvotes: 1

Views: 184

Answers (1)

Abhishek Gupta
Abhishek Gupta

Reputation: 1337

I didn't test this, but I think something like this should work.

import * as pages from '../components/pages'

const routes = pages.map(page => {
    return {
        path: `/${page.name}`,
        name: page.name,
        component: page
    }
})

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    ...routes,
    {
        path: '*',
        name: 'Default',
        component: DefaultComponent
    }
  ]
});

Upvotes: 1

Related Questions