Nuxt/Vue修改query后仍返回旧值，Nuxt Link参数更新异常求助

Hey there! Let's sort out this frustrating query parameter issue you're hitting in Nuxt. The core problem here is that directly modifying the existing $route.query object doesn't trigger the reactivity Nuxt needs to update the link—plus, Nuxt Link relies on detecting a new object reference to generate fresh URLs.

Why Your Original Approach Failed #

If you were trying something like directly mutating $route.query.categories (e.g., $route.query.categories = 'new-category') and passing $route to Nuxt Link, that won't work. The $route.query object is reactive, but mutating its properties doesn't create a new reference—so Nuxt doesn't pick up the change and keeps using the old URL.

The Working Solution: Preserve Old Params, Update Only categories #

The fix is simple: create a new query object that merges all existing query parameters, then overwrite just the categories field. This gives Nuxt Link a fresh reference to detect, while keeping all other params intact.

Option 1: Inline in the Template

You can handle this directly in your Nuxt Link component using the spread operator (...) to clone the old query:

<NuxtLink
  :to="{
    path: $route.path, // Keep the current page path
    query: {
      ...$route.query, // Copy all existing query params
      categories: 'your-new-category-value' // Override only this field
    }
  }"
>
  Update Category
</NuxtLink>

Option 2: In a Method (For Dynamic Values)

If you need to update categories based on user input or dynamic data, handle it in a method:

// In your component's methods section
methods: {
  updateActiveCategory(newCategory) {
    // Create a new query object with all old params + updated categories
    const updatedQuery = {
      ...this.$route.query,
      categories: newCategory
    }

    // Either push the new route directly...
    this.$router.push({ path: this.$route.path, query: updatedQuery })
    // ...or pass updatedQuery to Nuxt Link's :to prop
  }
}

Then use it in your template:

<NuxtLink @click.prevent="updateActiveCategory('electronics')">
  Switch to Electronics
</NuxtLink>

Bonus: Clear the categories Param

If you need to remove categories entirely while keeping other params, clone the query and delete the field:

const updatedQuery = { ...this.$route.query }
delete updatedQuery.categories

Key Takeaways #

• Never mutate $route.query directly—always create a new object.
• Use the spread operator to preserve existing params without manual copying.
• Ensuring a new query object reference tells Nuxt Link to generate an updated URL.

内容的提问来源于stack exchange，提问作者felixoi