Adding query data to url in Svelte

Question

I'm working on a SPA with Svelte. I have svelte-spa-router module installed. Nowhere seems to be documentation or examples how to add some object to your url.

This is easy in Vue:

router.push({ path: 'pathName', query: { someattribute: 'mygreatvalue' }})

In Svelte however the "push" only seems to support "location". I tried some vanilla function but it adds the data in the wrong place. My url looks like so: myniftyspa.com/#/thepage and I want:

myniftyspa.com/#/thepage/?someattribute=mygreatvalue

or:

myniftyspa.com/#/thepage/someattribute/mygreatvalue

it needs to stay on the page without reloading because I just want to store some data in the url this way. In the end it's about storing some ingredients information nested in an object that is being picked up after a revisit.

Answer 1

I figured something out as a "solution" that works for now. Maybe it's helping someone with the same issue.

the object you want to be stored:

   const ingrParams = [
      {
        id: 308,
        gr: 100 
      },
      {
        id: 7,
        gr: 100 
      },
      {
        id: 233,
        gr: 80 
      }
    ];

The snippet:

 push("/ingredients-to-nutrients/" + encodeURIComponent(JSON.stringify(ingrParams)));
 let p = JSON.parse(params.paramnameyousetinrouter);

(push is an import of the svelte-spa-router module) note: you need to do an initial push at onMount or else this push will be seen as a page change.

Answer 2

You can use vanilla window.history to set the current url without reload. Like so:

// address bar shows www.domain.com

window.history.pushState(null, '', window.location + '?foo=bar') 

// address bar shows www.domain.com?foo=bar