I'm have the following code and so far so good:
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,
},
];
But when add the additional import './views/object2/list-view';
as below, it doesn't work:
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,
},
];
I assume it doesn't work because the name of the component imported. Is there a way to clarify the difference in this file without changing the names of the components?
I tried this:
component: './views/object2/list-view'
but it still doesn't work.
Thanks in advance ladies and gentlemen.
CodePudding user response:
You haven't explained what exactly "doesn't work" so you are forcing me to guess. There is nothing illegal or conflicting about importing from two files with the same filename. What matters are the names of the exported items in each file that you want to import.
three of your import statements do not actually import any exports
Of your four import statements, only the first one imports an exported item, Route
. The other three are "side-effect imports" only.
import { Route } from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';
if your intention was to import everything from each file
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';
This imports the entire module into a single variable. You can then reference all the individual exports through that variable, e.g. list-view.model
and list-view.item
. As with any variable, make sure they have unique names.
to import individual exports that have the same name
import {list-object} from './views/object/list-view';
import {list-object as list-object2} from './views/object2/list-view';
This imports only the list-object
export from each list-view
file, and it renames the second one to list-object2
to give it a unique name within this file.
to import the default export with unique names:
Say both your list-view
imports have a default export and that is all you want to import. This is how you import the default export:
import list-view from './views/object/list-view'
import list-view2 from './views/object2/list-view'
You can assign any name to the default export (they are not exported with any name). Just make them unique.
CodePudding user response:
I did it with @customElement('object-list-view')
on the list-view
components @customElement('object2-list-view')
with this notation I can clarify the difference between components
now I can use
{
path: 'object',
component: 'object-list-view',
title: 'Object',
},
{
path: 'object2',
component: 'object2-list-view',
title: 'Object2',
}
Thanks a lot for the help with this.