Question

我有页面“ /用户”。

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标志，因为这是一个对象，并且我不确定是每次路由更改都会替换查询对象，还是只是修改查询对象。 deep标志将确保它始终会触发处理程序。

Vue。如何在当前页面上路由

1 个答案: