Search code examples
vue.jsvue-routerhtml5-history

Vue Router: does this.$router.push navigate to a new URL?

I read the documentation of vue-router (https://router.vuejs.org/guide/essentials/navigation.html)

This is the method called internally when you click a , so clicking is the equivalent of calling router.push(...)

As far as I know clicking router-link element navigates to the URL placed in "to" attribute. However, according to History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API#Examples), history.pushState(...) only changes the history and does not navigate to a new URL.

So... how can we explain this contradiction?

Solution

  • I think you need to define exactly what you mean by "navigate to a new URL"; to me it can mean either reloading the page at a new URL, or simply changing the URL in the address bar without reloading the page.

    history.pushState() does change the URL, but it doesn't cause the browser to perform a full page reload as is typical when you click a link. This is how "single page apps" work – they intercept <a> clicks and use history.pushState() to prevent the page from reloading.

    history.pushState(...) only changes the history and does not navigate to a new URL.

    Here I think "and does not navigate to a new URL" is wrong – it does, except the page doesn't reload.