如何导入同名不同路径的组件?
How to import components with the same name but different path?
我有以下代码,到目前为止还不错:
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'
但还是不行。
你还没有解释到底是什么“不起作用”所以你是在逼我猜测。从具有相同文件名的两个文件导入没有任何违法或冲突。重要的是要导入的每个文件中导出项目的名称。
您的三个导入语句实际上并未导入任何导出内容
在您的四个导入语句中,只有第一个导入导出项,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'
您可以为默认导出指定任何名称(它们不会以任何名称导出)。让它们独一无二。
我用 @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',
}
非常感谢您对此的帮助。
我有以下代码,到目前为止还不错:
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'
但还是不行。
你还没有解释到底是什么“不起作用”所以你是在逼我猜测。从具有相同文件名的两个文件导入没有任何违法或冲突。重要的是要导入的每个文件中导出项目的名称。
您的三个导入语句实际上并未导入任何导出内容
在您的四个导入语句中,只有第一个导入导出项,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'
您可以为默认导出指定任何名称(它们不会以任何名称导出)。让它们独一无二。
我用 @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',
}
非常感谢您对此的帮助。