vue js Push-Parameter an URL

Question

Ich verwende vuejs 3 und möchte Produkte filtern. Im ersten Schritt möchte ich Parameter an die URL senden und verwende dafür den Vue-Router. Derzeit sendet mein Filter nur einen Parameter an die URL jeder Gruppe, aber ich möchte alle Parameter der ersten Gruppe an die URL anhängen und von der zweiten Gruppe möchte ich nur einen Parameter an die URL (mittel oder groß) pushen

Wenn ich Rot und mittlere Größe auswähle, sieht mein Filter so aus localhost:8080/filter?color=red&size=medium . Wenn ich jedoch zwei Farben auswähle, sollten beide Farben angehängt werden und meine URL sollte wie folgt lauten localhost:8080/filter?color=red&color=blue&size=medium 或 localhost:8080/filter?color=red&color=blue&size=large

<template>
            <div class="products">
                <div class="multi_filters">
                    <h1>Multi Filter By Color</h1>
                    <a href="#" @click.prevent="activateFilter('color','red')">Red color</a>
                    <a href="#"  @click.prevent="activateFilter('color','blue')">Blue color</a>
                </div>
    
                <div class="single_filter">
                    <h1>Multi Size</h1>
                    <a href="#" @click.prevent="activateFilter('size','medium')">Medium</a>
                    <a href="#"  @click.prevent="activateFilter('size','large')">Large</a>
                </div>
    
            </div>
        </template>
       <script>
                export default {
                    data() {
                        return {
                            filters:{},
                            selectedFilters:{}
                        }
                    },
                    methods:{
                        activateFilter(key,value){
                            this.selectedFilters = Object.assign({},this.selectedFilters,{[key]:value})
                            console.log(this.selectedFilters)
                            this.$router.replace({
                                query: {
                                    ...this.selectedFilters
                                }
                            })
                        }
                    }
                
                }
            </script>

Answer 1

您应该为这个应用程序创建数据，如下所示，urlParams 以便每次有人点击颜色或尺寸并推送到它时获取数据。

data() {
    return {
      colors: [{id:1, name: "red" }, {id:2, name: "blue" }],
      sizes: [{id:1, name: "medium" }, {id:2, name: "large" }],
      urlParams: []
    };
  },

还有一些方法：

methods: {
    activateFilter(e) {
      //get color or size with condition not exist.
      if(!this.urlParams.includes(e)){
        this.urlParams.push(e);
      }

      //create params url
      const urlParam = this.urlParams.reduce((contains, current) => {
        if(this.createArrName(this.colors).indexOf(current) > -1){
          return contains += `color=${current}&`
        }else{
          return contains += `size=${current}&`
        }
      }, '')

      //adapt to url
    },
    createArrName(arrs) {
      return arrs.reduce((contains, current) => {
        return contains.concat(current.name)
      }, []) 
    }
  },

您编写颜色和尺寸循环的模板：