时间戳

首页 > 解决方案 > Vue。如何在当前页面路由

vue.js - Vue。如何在当前页面路由

问题描述

我有页面'/用户'。

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()它将重新加载当前页面并且它可以工作。但我想以另一种方式做到这一点。我怎样才能做到这一点？

标签： vue.js

解决方案

如果不需要，请不要重新加载页面。

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 标志将确保它始终触发处理程序。

推荐阅读