我有以下代碼，到目前為止一切順利：
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'
但它仍然不起作用。
在此先感謝女士們先生們。
uj5u.com熱心網友回復：
你還沒有解釋到底什么是“不起作用”，所以你強迫我猜測。從具有相同檔案名的兩個檔案匯入沒有任何非法或沖突。重要的是要匯入的每個檔案中匯出專案的名稱。
您的三個匯入陳述句實際上并未匯入任何匯出
在您的四個匯入陳述句中，只有第一個匯入匯出的專案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.model和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'
您可以為默認匯出指定任何名稱（它們不以任何名稱匯出）。只是讓它們獨一無二。
uj5u.com熱心網友回復：
我@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',
}
非常感謝您的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387162.html