打开模态表单（具有不同的URL），无需刷新

Question

有没有办法打开模态表单而不刷新页面但更改网址？我希望我的表单在同一页面上弹出，但我的表现令人耳目一新，所以没有任何意义是模态...我正在使用symfony，我在SecurityController中为我的login.view添加了一个不同的路径，扩展了base.view

index.view

<div class="buttons">
    <ul class="rotateButtons">
        <li class="rotateButton"><a href="{{ path('security_login') }}" class="round login">Login<span class="round">If you already have an account.</span></a></li>
        <li class="rotateButton"><a href="{{ path('user_register') }}" class="round register">Register<span class="round">If you don't have an account. </span></a></li>
        <li class="rotateButton"><a href="{{ path('print_all_songs') }}" class="round catalog">Catalog<span class="round">Take a look.</span></a></li>
    </ul>
</div>

login.view

<!--Login form-->
<div id="id01" class="modal">

    <form class="modal-content animate" action="{{ path('musicshare_index') }}" method="post" >
        <div class="imgcontainer">
            <span onclick="closeModalFunction()" class="close" title="Close Modal">&times;</span>
            <img src="{{ asset('pictures/remixLogo2.jpg') }}" alt="Avatar" class="avatar">
            <p class="formText">Login</p>
        </div>

        <div class="container">
            <label><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="_username" required>

            <label><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="_password" required>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
            <button type="submit">Log In</button>
        </div>
    </form>
</div>

<div class="buttons">

    <ul class="rotateButtons">
        <li class="rotateButton"><a href="#" class="round login" onclick="document.getElementById('id01').style.display='block'">Login<span class="round">If you already have an account.</span></a></li>
        <li class="rotateButton"><a href="#" class="round register" onclick="document.getElementById('id02').style.display='block'">Register<span class="round">If you don't have an account. </span></a></li>
        <li class="rotateButton"><a href="#" class="round catalog">Catalog<span class="round">Take a look.</span></a></li>
    </ul>
</div>

login.view - javascript

<script>
    function closeModalFunction() {
        document.getElementById('id01').style.display='none';
        window.history.replaceState( {} , '/' );
        window.history.back();

    }

</script>
<script type="text/javascript">
    document.getElementById('id01').style.display='block';
</script>

SecurityController - 登录功能

 /**
 * @Route("/login", name="security_login")
 */
public function login()
{
    return $this->render("security/login.html.twig");
}

Home page - picture

Loaded login form - picture