CODEWITHSUNDEEP
vue.jsvue-router
shuaige
shuaige

Reputation: 93

VueJs 3 :vue-router change query and use router.push() but url don't update

const route = useRoute()
const router = useRouter()

deep clone route.query and then change the property of new query,it works (url changes)

let newQuery = { ...route.query}
newQuery.keyword = undefined
router.push({
  name: 'search',
  query: newQuery,
})

but if I change property in route.query and then deep clone changed route.query,it cannot work (url not changes)

route.query.keyword = undefined
let newQuery = { ...route.query}
router.push({
 name: 'search',
 query: newQuery,
})

use console.log(newQuery) to check two newQuery, they are totally same. It confuses me. I wonder why that is

Upvotes: 2

Views: 1992

Answers (1)

Mohammad Hooshdar
Mohammad Hooshdar

Reputation: 238

You should not change route.query directly. It is a readonly value and for changing it you should do router.push({ ...route, query: { ...route.query, ...newQuery }})

So the second approach is wrong and you should avoid it.

Upvotes: 2

Related Questions