Generate a URL in LWC for navigation

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;
        });
    }
}

exploreNavMixin.html

<template>
  <a href={recordPageUrl}>Click</a>
</template>

exploreNavMixin.js

Hope this is helpful!