CODEWITHSUNDEEP
vue.jsvue-componentvue-router
vAhy_The
vAhy_The

Reputation: 638

Conditional importing of components in Vue Router

I have this issue, I want to import different components on same route.

This works fine

import Mycomponent from '@/views/Mycomponent'

{
  name: 'My component name',
  path: somepath,
  component: Mycomponent,
}

This doesn't work

import Mycomponent from '@/views/Mycomponent'
import MycomponentDifferent from '@/views/MycomponentDifferent'

{
  name: 'My component name',
  path: somepath,
  component: () => {
    if(true) {
     console.log(Mycomponent) // You can see in console whole component
     return Mycomponent
    } else {
     return MycomponentDifferent
    }
  }
}

and this is also not working

import Mycomponent from '@/views/Mycomponent'

{
  name: 'My component name',
  path: somepath,
  component: () => {
    return HomepageView
  }
}

Upvotes: 0

Views: 4570

Answers (1)

Crackers
Crackers

Reputation: 1125

Is it somewhere documented that you can use a function for component?
Instead of a function you could use a getter:

import Mycomponent from '@/views/Mycomponent'
import MycomponentDifferent from '@/views/MycomponentDifferent'

{
  name: 'My component name',
  path: somepath,
  get component() {
    if(true) {
     console.log(Mycomponent) // You can see in console whole component
     return Mycomponent
    } else {
     return MycomponentDifferent
    }
  }
}

Upvotes: 3

Related Questions