-1

我有以下代码，到目前为止一切顺利：

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'

但它仍然不起作用。

在此先感谢女士们先生们。

4

2 回答 2

0

您还没有解释究竟是什么“不起作用”，所以您强迫我猜测。从具有相同文件名的两个文件导入没有任何非法或冲突。重要的是您要导入的每个文件中导出项目的名称。

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

在您的四个导入语句中，只有第一个导入导出的项目，Route. 其他三个只是“副作用进口”。

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.modeland list-view.item。与任何变量一样，确保它们具有唯一的名称。

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

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

这仅从list-object每个list-view文件导入导出，并将第二个文件重命名为list-object2在此文件中为其提供唯一名称。

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

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

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

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

于 2021-12-18T14:23:45.553 回答
-1

我@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',
  }

非常感谢您对此的帮助。

于 2021-12-18T14:29:42.043 回答