Vue Change URL without Reloading
In this tutorial, we will learn how to change the URL without reloading the page using JavaScript's window history object pushState method. This method allows you to modify the URL without reloading the page.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
Vue Js Modify URL Without Reloading The Page Example
Copied to Clipboard
22
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
url: ''
};
},
mounted() {
const initialURL = window.location;
this.url = `Current Url: ${initialURL}`
},
methods: {
updateURL() {
const newURL = '/new-url';
window.parent.history.pushState({}, '', newURL);
const changedUrl = window.parent.location;
this.url = `Changed Url: ${changedUrl}`
},
}
});
</script>
Output of Vue Update Url Without Navigating
Before Chnage Url
After Change Url
Ad