How to add value in the URL when button click without reloading/relocating the page

Question

In this case, i just want to concat the value of id in the end of my url.

Anyway I just found out the solution.

I want to add value in the url.

My current URL is

localhost:1000//settings/tab=contact-types

Lets say i have this function

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   
}

I have button in every row of my table and when I clicked it will run the view() function and show modal for viewing.

I want to add the specific value of my parameter in the url without reloading/relocating the page.

thankyou!

Possible duplicate of https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — misorude, Oct 17 '18 at 09:35
Possible duplicate of [Modify the URL without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — ponury-kostek, Oct 17 '18 at 09:41

score 2 · Answer 1 · answered Oct 17 '18 at 10:01

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

answered Oct 17 '18 at 10:01

Ridvan Sumset

508
6
13

if you are using the vue.js and vue-router, then this solution is not good so. because you can use the vue -router utilities regarding update URL. – Ali Torki Nov 27 '18 at 19:57

score 1 · Answer 2 · answered Oct 17 '18 at 09:39

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,
       },
      });
     },
    }
}

score 0 · Answer 3 · answered Oct 17 '18 at 09:52

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

answered Oct 17 '18 at 09:52

Triple0t

444
3
9

Thankyou, I also found out the answer btw we have the same logic. Thanks bro! – MONSTEEEER Oct 17 '18 at 09:57
yeah. but there is a difference between push and replace. *pushState* would create a *new entry* in the navigation history while *replaceState* would replace the current *entity*. Which seems to be what you wanted. @MONSTER – Triple0t Oct 18 '18 at 13:45

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

How to add value in the URL when button click without reloading/relocating the page

thankyou!

4 Answers4

thankyou!