Vue实战项目(七)：合并参数

最新推荐文章于 2025-12-23 06:11:38 发布

原创最新推荐文章于 2025-12-23 06:11:38 发布 · 565 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

该代码段展示了一个Vue组件中处理搜索功能的方法。当用户点击‘全部分类’或进行关键词搜索时，需要合并并传递参数到搜索路由组件。方法检查当前路由的query参数，并在跳转时确保将keyword和原有query一同包含在新路由中。

1. 当点击全部分类时需要携带参数，如果点击了全部分类后，还添加了关键词搜索时也需要携带参数，所以此时需要合并参数

//src >>> components >>> Header >>> index.vue
<script>
export default {
   name: '',
   data(){
      return {
         keyword:'',
      },
      methods:{
         //搜索按钮的事件处理函数，用于跳转至search路由组件当中
         goSearch(){
            //如果有query参数也要传过去
            if(this.$route.query){
               let location = {name:"search",params:{keyword:this.keyword || undefined}}
               location.query = this.$route.query
               this.$router.push(location)
            }
         }
      }
   }
}
</scirpt>