The Following code will help navigate from one page to other in community using LWC.
In the below example Page 1 is calling Page2.
Page1:
HTML:
| <template>
<!-- Neutral variant (default) -->
<lightning-button label="click Please" title="Neutral action"
onclick={handleClick} class="slds-m-left_x-small">
</lightning-button>
</template>
|
JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /* eslint-disable no-alert */
/* eslint-disable no-console */
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class Nav1Community extends NavigationMixin(LightningElement) {
handleClick(event) {
alert(event.target.label);
//console.log(event.target.label);
//pagetwo
this[NavigationMixin.Navigate]({
type: 'comm__namedPage',
attributes: {
pageName: 'pagetwo'
},
state: {
'category': 'param1value'
}
});
}
}
|
MetaData xml:
1
2
3
4
5
6
7
8
9
10
| <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="nav1Community">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
|
Page 2:
HTML:
1
2
3
| <template>
<lightning-badge label={urlParam} ></lightning-badge>
</template>
|
JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import { LightningElement,api } from 'lwc';
export default class Nav2Community extends LightningElement {
@api urlParam = 'test';
connectedCallback() {
let testURL = window.location.href;
let newURL = new URL(testURL).searchParams;
// eslint-disable-next-line no-console
console.log('id ===> '+newURL.get('category'));
this.urlParam = newURL.get('category');
}
}
|
MetaData xml:
1
2
3
4
5
6
7
8
9
10
11
| <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"
fqn="nav2Community">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
|
