Changing a parameter in Vue 3 router

Question

I was trying to change a route parameter with Vue router. My route is the following :

/document/:id?/:lang?/edit

Id and lang (language) are the parameters. I want to change the parameter lang using JavaScript without altering the rest of the route. I tried applying the following solution (found here). The solution was made for Vue 2 and not 3. So I tried to make an updated version. This is my code :

let params = this.$route.params
params.lang = 'en'
this.$router.push({params:params})

When I execute my code, there is no change in the route parameters nor an error logged in the console. Does anyone know a solution to this problem in Vue 3.

Thanks in advance.

Answer 1

It's a bad way to change your route parameter like this.

Instead, replace your route with the same name, same id, but different lang:

  this.$router.replace({
    name: this.$route.name,
    params: {
      id: this.$route.params.id,
      lang: 'en' // or whatever you want
    }
  })

Don't forget to watch for the route changes if needed:

  watch: {
    $route(to, from) {
      // if anything needs to be done when the route changes
    }
  }