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>
??? ??? ?? ? ?? ?? ???? ???? ???. urlParams
???? ???? ??? ??? ??? ???? ???? ??? ? ??? ?? ???.
? ?? ??? ????:
????? ? ?? ?? ??? ?? ???:
???