0
<template for:each={menuItems} for:item="menuItem">
                <li key={menuItem.location} class="menu-item" href={menuItem.location} onclick={handleMenuItemClick}>
                    {menuItem.title}
                </li>
            </template>
 menuItems = [
        { title: 'Home', location: '/home' },
        { title: 'UI', location: '/ui' },
    ];
    constructor() {
        super(); 
        this.router.on({
            '/home': async () => {
                const { default: ViewHome } = await import('view/home');
                this.setPage('view-home', ViewHome);
            },
            '/ui': async () => {
                const { default: ViewUi } = await import('view/ui');
                this.setPage('view-ui', ViewUi);
            },

        });

    handleMenuItemClick(evt) {
        evt.preventDefault();
        const href  = evt.target;

        console.log('aa',href);
        this.router.navigate(href, true);

    }
Value of href = <li href="/home" class="menu-item">Home</li>

When i click on li element,i want to route to that LWC component page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.