Question

我不确定这是否可能，但这是我正在尝试做的事情：

我正在一个页面上显示不同产品的搜索结果。产品具有多个过滤器（例如尺寸，重量，颜色，国家/地区等）。我希望该网址“描述”这些过滤器。

我可以用'？'做一些非常基本的事情。（例如：/ color /：color？/ country /：country）。但这会强制执行特定顺序，并且需要输入url中的所有部分。我正在处理10多个滤镜，其中一些可以具有多种颜色。

我正在考虑的非Vue选项可能是：example.com/search/?weight=10-20&color=blue&color=red&country=usa。

这将需要使用Window.history.push，并使用javascript解析queryString，而我可能根本无法使用VueRouter。

我对Vue.js没有经验，因此建议您提出任何建议。

谢谢

Answer 1

您可以使用$route.query从当前URL访问查询参数。无需自己解析。

您的模板可以直接访问查询参数：

<div v-if="$route.query.weight">weight: {{ $route.query.weight }}</div>
<div v-if="$route.query.country">country: {{ $route.query.country }}</div>
<div v-if="$route.query.color">color: {{ $route.query.color }}</div>

您的脚本可以访问以下参数：

methods: {
  logQueryParams() {
    console.log("weight", this.$route.query.weight)
    console.log("country", this.$route.query.country)
    console.log("color", this.$route.query.color)
  }
}

您的脚本还可以watch进行参数更改：

watch: {
  ["$route.query.weight"](weight, oldWeight) {
    console.log("new weight", weight);
  }
}

您可以强制使用$router.push推一条新路线：

methods: {
  searchCanada() {
    this.$router.push({ name: "search", query: { country: "canada" } });
  }
}

demo

具有多个无序可选参数的Vue2路由器

1 个答案: