dynamically change query and use router.push() but url don't update #6285

ylw5 · 2022-07-17T11:53:25Z

ylw5
Jul 17, 2022

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.
Although I find explaination in document :

The current active route location. This property is read-only and its properties are immutable, but it can be watched.

I know alter query directly is not correct. But It still confuses me, because I get two same object and pass to router.push(), but only the first one works.
I wonder what's the reason behind it?

Answered by Kolobok12309

Jul 18, 2022

Underhood, router get currentRoute and to

Code fragment(can't add snippet from another repo)

const targetLocation: RouteLocation = (pendingLocation = resolve(to))
const from = currentRoute.value

...

if (!force && isSameRouteLocation(stringifyQuery, from, targetLocation)) {

And in isSameRouteLocation check queries

function isSameRouteLocation(
  stringifyQuery: (query: LocationQueryRaw) => string,
  a: RouteLocation,
  b: RouteLocation
): boolean {
  const aLastIndex = a.matched.length - 1
  const bLastIndex = b.matched.length - 1

  return (
    aLastIndex > -1 &&
    aLastIndex === bLastIndex &&
    isSameRouteRecord(a.matched[aLastIndex], b.matched[bLastIndex]) &&
    isSameRouteLocat…

View full answer

Kolobok12309 · 2022-07-18T18:28:16Z

Kolobok12309
Jul 18, 2022

Underhood, router get currentRoute and to

Code fragment(can't add snippet from another repo)

const targetLocation: RouteLocation = (pendingLocation = resolve(to))
const from = currentRoute.value

...

if (!force && isSameRouteLocation(stringifyQuery, from, targetLocation)) {

And in isSameRouteLocation check queries

function isSameRouteLocation(
  stringifyQuery: (query: LocationQueryRaw) => string,
  a: RouteLocation,
  b: RouteLocation
): boolean {
  const aLastIndex = a.matched.length - 1
  const bLastIndex = b.matched.length - 1

  return (
    aLastIndex > -1 &&
    aLastIndex === bLastIndex &&
    isSameRouteRecord(a.matched[aLastIndex], b.matched[bLastIndex]) &&
    isSameRouteLocationParams(a.params, b.params) &&
    stringifyQuery(a.query) === stringifyQuery(b.query) &&
    a.hash === b.hash
  )
}

But you mutate currentRoute and deep copy it to new route, for isSameRouteLocation is 2 equal queries

1 reply

ylw5 Jul 19, 2022
Author

Wow! Thanks for your answer, I need learn more from underhood.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dynamically change query and use router.push() but url don't update #6285

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

dynamically change query and use router.push() but url don't update #6285

ylw5 Jul 17, 2022

Replies: 1 comment · 1 reply

Kolobok12309 Jul 18, 2022

ylw5 Jul 19, 2022 Author

ylw5
Jul 17, 2022

Replies: 1 comment 1 reply

Kolobok12309
Jul 18, 2022

ylw5 Jul 19, 2022
Author