lwc 페이지 리다이렉트 방법 - NavigationMixin, widow.location.href ( How to redirect lwc page - NavigationMixin, widow.location.href )

 

1. NavigationMixin

 

 

1-1 : import { NavigationMixin } from 'lightning/navigation';

 

/* js 파일 */

import { LightningElement,wire, track, api } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

 

---

1-2 : extends NavigationMixin(LightningElement) { ... }

export default class zz_clvs_MDE_Template_Create extends NavigationMixin(LightningElement) { .... }

 

---

1-3 : this[NavigationMixin.Navigate]({ ... }) 구현

• type: standard__objectPage
• type:  standard__recordPage

//취소버튼 클릭 시 전자계약 템플릿 개체 목록보기 페이지로 이동

    returnListVeiw(event){

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'MDE_Template__c',

                actionName: 'list'

            }

        })

        .then((url) =>{

            window.open(url,"_self");

        });

       

    }

 

참조 : https://developer.salesforce.com/docs/component-library/bundle/lightning-navigation/documentation

---

1-4 : 예시 코드 확인

 

 /* js 파일 */

 

   import { LightningElement, api, wire, track } from 'lwc';

   import { NavigationMixin } from 'lightning/navigation';

 

 

   export default class EmbeddedTemplateEdit extends NavigationMixin(LightningElement) {

 

 

// 닫기 버튼 클릭 시 동작 - 레코드 페이지로 이동

    cancle() {

        // this.dispatchEvent(new CloseActionScreenEvent());

        this[NavigationMixin.Navigate]({

            type: 'standard__recordPage',

            attributes: {

                recordId: this.c__recordId,

                objectApiName: 'MDE_Template__c',

                actionName: 'view'

            },

        })

        .then((url) => {

            window.open(url, "_self");

        });

    }

 

 

//취소버튼 클릭 시 동작 - 전자계약 템플릿 개체 목록보기 페이지로 이동

    returnListVeiw(event){

        const confirmation = window.confirm('정말 취소하시겠습니까?');

       

        if (confirmation) {

            this.embeddedUrl = '';

            this[NavigationMixin.Navigate]({

                type: 'standard__objectPage',

                attributes: {

                    objectApiName: 'MDE_Template__c',

                    actionName: 'list'

                }

            })

            .then((url) =>{

                window.open(url,"_self");

            });

        }

       

    }

 

}

 

 

 

---

 

 

2. window.location.href

 

2-1 : url 지정시 참조

• 맨 앞에 [ / ] 해주면 내 도메인주소 지정 됨 이후에 연결될 곳으로 연결 
• 아우라 컴포넌트 호출 및 매개변수 전달 시에 [ c__ ] 접두사 붙여주어야함.
• 안 하면 컴포넌트 호출 안되거나 전달한 매개변수 사라짐

---

2-2 : 내가 NavigationMixin 대신 window.location.href 사용한 이유

• NavigationMixin 사용해서 전달하니 화면 새로고침 안됨 -> 쿠키 초기화 안 돼서 lwc 컴포넌트 재 실행 시 기존의 작업화면이 이어서 보임 -> window.location.href 활용

---

2-3 : 예시 코드 확인

• 템플릿 제목 입력했을때만 다른 컴포넌트 호출
• templateTitle 매개변수로 전달
• lwc 컴포넌트는 url로 호출 불가능 -> aura compomnent 호출하여 해당 컴포넌트에서 lwc component 보여주기

 

/* lwc.js 파일 */

callEmbedded(event){

     

       const titleInput = this.template.querySelector('lightning-input[data-id="titleInput"]');

 

       if (titleInput != null && titleInput.value.trim() != '' ) {

                window.location.href  

                    = '/lightning/cmp/c__zz_Clvs_MDE_Template_Create_Url_Embedded?c__templateTitle='

                                                                                                                          + encodeURIComponent(titleInput.value);

       }

 

---

2-4 : 인코딩 디코딩

• URL로 특수문자 전달이 필요하거나 내용이 공개되면 안 되는 경우에는 encoding 하여서 전달받는 쪽에서는 decoding 하여서 해석
• 보내는 쪽 인코딩 
  • encodeURIComponent(titleInput.value);
• 받는 쪽 디코딩 
  • var templateTitle = decodeURIComponent(component.get("v.pageReference").state.c__templateTitle);