Vue。如何在当前页面路由

Question

我有页面'/users'。

export default {
  name: 'Users',
  created () {
    const queryParams = this.$route.query
    this[GET_USERS_FROM_SERVER](queryParams)
  },
  methods: {
    ...mapActions([GET_USERS_FROM_SERVER]),
    onBtnFilterClick () {
      this.$route.push('/users?minAge=20&name=alex&withPhoto=true')
    }
  }
}

当页面启动时，它会检查参数并从服务器获取用户。但它不起作用，我认为这是因为路由器认为'/users' 和'/users?params' 是同一条路径。

如果我在this.$router.go() 之后添加this.$router.go()，它将重新加载当前页面并且它可以工作。但我想以另一种方式做到这一点。我该怎么做？

Answer 1

如果没有必要，不要重新加载页面。

this.$route.query 可以与您的其他数据一样具有反应性，因此请使用这一事实。

export default {
  name: 'Users',
  watch: {
    '$route.query': {
      immediate: true,
      deep: true,
      handler (queryParams) {
        this[GET_USERS_FROM_SERVER](queryParams)
      }
    }
  },
  methods: {
    ...mapActions([GET_USERS_FROM_SERVER]),
    onBtnFilterClick () {
      this.$route.push('/users?minAge=20&name=alex&withPhoto=true')
    }
  }
}

当您监视 $route.query 上的更改时，只要它发生更改，您就会调用 this[GET_USERS_FROM_SERVER]。我怀疑这会更改组件中的数据。我设置了immediate 标志以在创建组件时运行它。我设置了deep 标志，因为这是一个对象，我不完全确定查询对象是否被每次路由更改所替换，或者只是被修改。深度标志将确保它始终触发处理程序。