[Vuejs]-How to add value in the URL when button click without reloading/relocating the page

by

0👍

✅

I just found the solution by simply using this code on my function.

view: function(id)
{
    var newurl = window.location.href +"/"+id
    window.history.pushState({path:newurl},'',newurl);
}

the window.location.href define my current url

I just concat the value of id in the end of my current url and uses the

window.history.pushState({path:newurl},'',newurl);

to push it in the url.

thankyou!

2👍

I guess what you need is pushState():

window.history.pushState("state obj or string", "your title", id);

Put the line above in your view function. For more info check: Updating address bar with new URL without hash or reloading the page

1👍

Please test this code

export default {
    mounted(){
        this.updateURLQuery("tab", "reports")
    },
    methods: {
        updateURLQuery(query, value) {
    		const componentLocation = window.location.pathname;
    		this.$router.push({
    			path: componentLocation,
    			query: {
    				[query]: value,
    			},
    		});
    	},
    }
}

0👍

Well you could do so by making use of the history api. 

function view(id){ 
// lets say the value of id is 1
// localhost:1000//settings/tab=contact-types/1  #i want the current url look like this  
// get the current url
const oldUrl = location.href;
// get append the id to the url
const newUrl = oldUrl + '/' + id;
// update the url of the page
history.replaceState({}, '', newUrl);
}

Read More on History Push Here

Leave a comment