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>
|
@Author There is a typo I believe. It's supposed to be name only instead of pageName in the attribute while sending it to pagereference
ReplyDeleteThanks dude. It helped me
ReplyDeleteCasinos that Offer Blackjack and Casino Slots to US Players
ReplyDeleteBlackjack is a casino game played with an 리턴벳 Asian background 오늘 뭐 먹지 룰렛 and very high gambling volume. 라이브스코어 사이트 You will find slots 코인갤 in a variety of 벳365 game types like table games,