如何导入同名不同路径的组件？

Question

我有以下代码，到目前为止还不错：

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './main-layout.ts';

export type ViewRoute = Route & {
  title?: string;
  children?: ViewRoute[];
};

export const views: ViewRoute[] = [
  {
    path: 'object',
    component: 'list-view',
    title: 'Objects',
  },
  {
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => {
      await import('./views/dashboard/dashboard-view');
    },
  },
];

export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'main-layout',
    children: views,
  },
];

但是当如下添加额外的import './views/object2/list-view';时，它不起作用：

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

export type ViewRoute = Route & {
  title?: string;
  children?: ViewRoute[];
};

export const views: ViewRoute[] = [
  {
    path: 'object',
    component: 'list-view',
    title: 'Object',
  },
  {
    path: 'object2',
    component: 'list-view',
    title: 'Object2',
  },
  {
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => {
      await import('./views/dashboard/dashboard-view');
    },
  },
];

export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'main-layout',
    children: views,
  },
];

我认为它不起作用，因为导入了组件的名称。有没有办法在不更改组件名称的情况下澄清此文件中的差异？

我试过这个：

component: './views/object2/list-view'

但还是不行。

Answer 1

你还没有解释到底是什么“不起作用”所以你是在逼我猜测。从具有相同文件名的两个文件导入没有任何违法或冲突。重要的是要导入的每个文件中导出项目的名称。

您的三个导入语句实际上并未导入任何导出内容

在您的四个导入语句中，只有第一个导入导出项，Route。其他三个是"side-effect imports" only.

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

如果您打算从每个文件中导入所有内容

import * as list-view from './views/object/list-view';
import * as list-view2 from './views/object2/list-view';
import * as main-layout from './main-layout.ts';

这会将整个模块导入到单个变量中。然后，您可以通过该变量引用所有单独的导出，例如list-view.model 和 list-view.item。与任何变量一样，确保它们具有唯一的名称。

导入具有相同名称的单个导出

import {list-object} from './views/object/list-view';
import {list-object as list-object2} from './views/object2/list-view';

这仅从每个 list-view 文件导入 list-object 导出，并将第二个文件重命名为 list-object2 以在该文件中为其指定一个唯一的名称。

导入具有唯一名称的默认导出：

假设您的 list-view 导入都有默认导出，这就是您想要导入的全部内容。这是您导入默认导出的方式：

import list-view from './views/object/list-view'
import list-view2 from './views/object2/list-view'

您可以为默认导出指定任何名称（它们不会以任何名称导出）。让它们独一无二。

Answer 2

我用 @customElement('object-list-view') 在 list-view 组件上做到了 @customElement('object2-list-view')

用这个符号我可以阐明组件之间的区别

现在我可以使用了

{
    path: 'object',
    component: 'object-list-view',
    title: 'Object',
  },

{
    path: 'object2',
    component: 'object2-list-view',
    title: 'Object2',
  }

非常感谢您对此的帮助。

如何导入同名不同路径的组件？

How to import components with the same name but different path?

typescript

vaadin

vaadin-fusion

vaadin22

hilla

您的三个导入语句实际上并未导入任何导出内容

如果您打算从每个文件中导入所有内容

导入具有相同名称的单个导出

导入具有唯一名称的默认导出：