防止重复请求路由

最新推荐文章于 2025-02-17 22:00:35 发布

原创最新推荐文章于 2025-02-17 22:00:35 发布 · 235 阅读

0 ·

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

收录于

当前文章被以下社区和专栏收录：

这段代码展示了在Vue.js应用中，如何处理列表项的点击事件以展示过滤详情。`<liv-for>`指令用于遍历`filterList`，并绑定点击事件到`handleFilterDetail`，该方法更新当前选择的过滤器并根据过滤器名称推动路由到'filterdetail'页面。同时，通过`filterPre`变量避免重复请求。

<li  v-for='list in filterList'
       v-bind:key='list.id'
      @click='handleFilterDetail(list.name)'
  >
data () {
    return {
      filterList: [],
      filterPre: this.$route.query.filterName
    }
  },
  handleFilterDetail (filterName) {
      console.log('Clickview', filterName)
      if (this.filterPre !== filterName) {
        this.filterPre = filterName// 防止重复请求路由
        this.$router.push({ name: 'filterdetail', query: { filterName } })
      }
    },