Generate a URL in LWC for navigation
If you ever want an anchor tag to have the href dynamically built you can rely on NavigationMixin again in association with a different method, which is GenerateUrl.
In the last post, we looked at how to navigate a user to the destination page using the NavigationMixin and Navigate method.
If you ever want an anchor tag to have the href dynamically built you can rely on NavigationMixin again in association with a different method, which is GenerateUrl.
Here is a snippet demoing that!
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class ExploreNavMixin extends NavigationMixin(LightningElement) {
recordPageUrl;
connectedCallback() {
//1. Generate a URL to a User record page
this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: '005B0000001ptf1IAE',
actionName: 'view',
},
}).then(url => {
//2. Assign it to the prop
this.recordPageUrl = url;
});
}
}
<template>
<a href={recordPageUrl}>Click</a>
</template>
Hope this is helpful!