移除路由器中的查詢項

Question

我正在使用Vue中的replace方法將query新增至目前URL。 如果值不存在，我將其賦值為undefined。

this.$router.replace({
  name: "admin-frs",
  query: {
    limit: this.pageSize,
    page: this.currentPage,
    sort: this.sortbyapi || undefined,
    language: this.sortbyapiLang || undefined,
  },
})

當查詢資料更新時，這將使查詢項目從URL中消失，這是可以接受的。

但它不會從查詢物件中刪除它。

有沒有比這更好的方法呢？

此外，是否可能從路由中取得查詢項，就像&limit=10...etc這樣？

Answer 1

如果我理解正確，OP希望操作傳遞給router.replace的查詢物件。可以使用標準的js來實作。

首先，明確命名一個查詢變數...

let query = $router.query;

要刪除某個屬性，可以使用js的delete運算子。例如，要刪除query.limit...

// 删除limit属性
if (!this.pageSize) delete query.limit;

或者，如果你正在建立該查詢，可以一開始就不加入limit屬性...

let query = {};
if (this.pageSize) query.limit = this.pageSize;
if (this.currentPage) query.page = this.currentPage;
// 其他属性也是类似的处理
// query现在只包含上述选择的属性

進行任何這些操作後，將變數傳遞給路由器...

$router.replace({ name: "admin-frs", query });

要將其轉換為字串，可能有幾種方法，包括許多您可能擁有的庫中的方法，但原生的方法是...

let params = [];
for (let key in query)
  params.push(`${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`);
const queryString = params.join("&");