如何使用jQuery Mobile的$ .mobile.navigate在导航后更改URL

I'm new to jQuery Mobile and I've been trying so hard (been googling for 2 days straight) to understand how the navigation to external pages works but finding it really hard so hopefully I can get a proper explanation here. From my searches I've found the $.mobile.navigate function but I haven't quite figured out how exactly to use it.

Basically what I have is a login.php page, after you successfully logged in you should be taken to the homepage.php, I've managed to make it so that the homepage.php's content is shown, but when it comes to the URL I can see for a split second that it changes to homepage.php but immidiately changes back to login.php. How can I make it so that it stays on homepage.php?

I navigate to homepage.php with $.mobile.navigate like so:

<input type="submit" form="login-form" name="submit_login" value="Logga in" id="submit-login">

$('body').on('click', '#submit-login', function() {
    $.mobile.navigate('../../includes/pages/homepage.php');
});

And currently my homepage.php file looks like this:

<div data-role="page" data-url="homepage" data-theme="b" id="homepage">
    <div data-role="header">Some content here</div>
    <div data-role="main">Some content here</div>
    <div data-role="footer">Some content here</div>
</div>

I read somewhere that data-url is used for changing the url on navigation but I haven't been able to make any use of it from my attempts.