Ajouter un paramètre à l'URL courante avec JavaScript

Publié le 27/02/2019 • Actualisé le 27/02/2019

Voici une manière propre d'y arriver en utilisant l'objet JavaScript URL. Dans ce snippet : 1) On récupère l'URL courante du navigateur. 2) On créé un objet URL avec l'url que nous venons de récupérer. 3) Nous lui ajoutons et lui assignons des paramètres GET. 4) Enfin, nous changons l'URL du navigateur avec ce que nous venons de construire et ce sans recharger la page. Et voilà! 😉

PS : Veuillez noter que si vous rafraichissez la page, the paramètre id sera de nouveau ajouté à l'URL mais pas le paramètre foo car nous utilisons pour ce dernier la fonction set qui l'empêche donc d'être ajouté plusieurs fois. (la plupart du temps nous aurons donc besoin de cette fonction set)

---

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  data: {
    id: 17
  },
  methods: {
    snippet17 () {
      const urlStr = window.location.href
      const urlObj = new URL(urlStr)
      urlObj.searchParams.append('foo', 'bar')
      urlObj.searchParams.append('id', this.id)
      urlObj.searchParams.set('foo', 'bar2')
      history.replaceState({}, '', urlObj.toString())
      console.log('Refresh the page and check the URL! 🧐')
    }
  },
  mounted () {
    if (this.isArticle(this.id)) {
      this.snippet17()
    }
  }
}

 Plus sur Stackoverflow  Snippet aléatoire

  Travaillez avec moi !

---