vue js는 매개변수를 URL로 푸시합니다.

Question

vuejs 3을 사용하고 있는데 제품을 필터링하고 싶습니다. 첫 번째 단계에서는 매개변수를 URL로 보내고 이를 위해 vue 라우터를 사용합니다. 현재 내 필터는 각 그룹의 URL에 하나의 매개변수만 전송하지만 첫 번째 그룹의 모든 매개변수를 URL에 추가하고 두 번째 그룹에서는 하나의 매개변수만 URL(중형 또는 대형)에 푸시하려고 합니다.

빨간색과 중간 크기를 선택하면 필터가 이렇게 생겼어요localhost:8080/filter?color=red&size=medium . 하지만 두 가지 색상을 선택하면 두 색상이 모두 추가되어야 하며 내 URL은 다음과 같아야 합니다 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 누군가가 색상이나 크기를 클릭할 때마다 데이터를 가져와서 푸시할 수 있도록 해야 합니다.

으아악

몇 가지 방법도 있습니다:

으아악

색상 및 크기 루프 작성을 위한 템플릿:

으아악