Vue路由器中组件的有条件导入

Question

我有这个问题，我想在同一路线上导入不同的组件。

这很好

import Mycomponent from '@/views/Mycomponent'
{
name: 'My component name',
path: somepath,
component: Mycomponent,
}

不起作用

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
}
}
}

这也不起作用

import Mycomponent from '@/views/Mycomponent'
{
name: 'My component name',
path: somepath,
component: () => {
return HomepageView
}
}

Answer 1

是否有文件证明您可以为component使用函数
您可以使用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
}
}
}