Vue修改地址栏参数并重新加载的七种方法详解

// 在组件中
export default {
  methods: {
    updateQueryParams() {
      // 创建新的查询参数对象
      const newQuery = {
        ...this.$route.query,  // 保留现有参数
        param1: 'newValue1',    // 修改或添加参数
        param2: 'newValue2'
      };
      
      // 替换当前路由（不添加历史记录）
      this.$router.replace({
        query: newQuery
      }).then(() => {
        // 可选：手动触发重新加载
        this.reloadComponent();
      });
    },
    
    reloadComponent() {
      // 方法1：强制重新渲染组件
      this.$forceUpdate();
      
      // 方法2：通过 key 的变化强制重新创建组件
      // 在模板中: <router-view :key="$route.fullPath">
      
      // 方法3：重新获取数据
      this.fetchData();
    }
  }
}

// 修改参数并添加历史记录
this.$router.push({
  path: this.$route.path,
  query: {
    ...this.$route.query,
    param1: 'newValue',
    param2: null  // 移除某个参数
  }
});

import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    
    const updateParams = () => {
      router.replace({
        query: {
          ...route.query,
          page: 2,
          sort: 'desc'
        }
      });
    };
    
    return { updateParams };
  }
}

<template>
  <div>
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  watch: {
    '$route.query': {
      handler(newQuery) {
        // 当查询参数变化时重新加载数据
        this.loadData(newQuery);
      },
      immediate: true  // 立即执行一次
    }
  },
  
  methods: {
    loadData(query) {
      // 根据新参数重新加载数据
      console.log('加载数据，参数:', query);
    },
    
    // 更新特定参数
    updateParam(key, value) {
      const query = { ...this.$route.query };
      
      if (value === null || value === undefined) {
        delete query[key];  // 移除参数
      } else {
        query[key] = value;  // 更新参数
      }
      
      this.$router.replace({ query });
    }
  }
}
</script>

updateURLParams() {
  const url = new URL(window.location);
  const params = new URLSearchParams(url.search);
  
  // 修改特定参数
  params.set('param1', 'newValue');
  params.delete('param2');  // 删除参数
  
  // 构建新URL
  const newUrl = `${url.pathname}?${params.toString()}${url.hash}`;
  
  // 使用 router 跳转
  this.$router.replace(newUrl);
  
  // 或者直接修改地址栏（会刷新页面）
  // window.history.replaceState({}, '', newUrl);
  // location.reload();  // 强制刷新
}

// utils/urlHelper.js
export const updateQueryParams = (router, updates) => {
  const currentQuery = router.currentRoute.value?.query || router.currentRoute.query;
  
  // 合并更新
  const newQuery = {
    ...currentQuery,
    ...updates
  };
  
  // 清理 undefined 或 null 的值
  Object.keys(newQuery).forEach(key => {
    if (newQuery[key] === undefined || newQuery[key] === null) {
      delete newQuery[key];
    }
  });
  
  return router.replace({ query: newQuery });
};

// 在组件中使用
import { updateQueryParams } from '@/utils/urlHelper';

// Vue 2
updateQueryParams(this.$router, { page: 2, sort: 'name' });

// Vue 3
const router = useRouter();
updateQueryParams(router, { page: 2, sort: 'name' });

<template>
  <router-link
    :to="{
      query: {
        ...$route.query,
        param1: 'newValue'
      }
    }"
    replace  <!-- 使用 replace 而不是 push -->
  >
    修改参数
  </router-link>
</template>

// 防抖示例
import debounce from 'lodash/debounce';

export default {
  methods: {
    updateParams: debounce(function(params) {
      this.$router.replace({
        query: {
          ...this.$route.query,
          ...params
        }
      });
    }, 300)
  }
}