URL with hash behaves differently when used with window.open() method without window.location.href property

I am not familiar with Javascript, and would be grateful if you could enlighten me regarding the following observation.

I have this Javascript function which should navigate to a page with param string appended. For example:

savebuttonClick() {

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child#Id=123"),"_self");    
     

    }

However, the above script would navigate to the correct URL, but with a blank page displayed.

Changing the scripts by adding the constructing the URL with the window.location.href property first before navigating with the window.open() method would addressed the issue. The page will be displayed as expected, and the parameter (Id)’s value (123) will be passed to the page:

       window.location.href = encodeURIComponent("/lightning/n/Test_Win_Open_Child#Id=123");
       window.open(window.location.href,"_self");      

Or, replacing the hash(#) with question mark (?) would also work:

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child?Id=123"),"_self");    

Can someone please help explain the above observation?

Thank you very much!