您的位置:

this.$router.query详解

一、什么是this.$router.query

this.$router.query是Vue.js中路由器对象router的一个属性,通过它可以获取到当前路由的查询参数。查询参数指的是URL中以问号“?”开始的字符串,通常用来传递不同页面之间的参数。例如,我们访问一个URL:http://mywebsite.com/products?id=123&name=abc,其中id和name就是查询参数。

二、如何使用this.$router.query

使用this.$router.query非常简单,只需要在需要获取参数的组件中调用即可。

  export default {
    created () {
      console.log(this.$router.query);
    }
  }

上述代码中,我们在组件的created生命周期函数中打印出this.$router.query,即可获取当前路由的查询参数。通常情况下,我们不会直接使用this.$router.query,而是将其解构出来保存在data中:

  export default {
    data () {
      return {
        id: '',
        name: ''
      }
    },
    created () {
     const { id, name } = this.$router.query;
     this.id = id;
     this.name = name;
    }
  }

上述代码中,我们通过解构this.$router.query,将id和name保存在组件的data属性中,方便后续使用。

三、this.$router.query的注意事项

1. URL中的查询参数需要进行编码

任何URL中的特殊字符都需要进行编码,否则可能会影响URL的解析和传递,造成一系列问题。例如上面提到的http://mywebsite.com/products?id=123&name=abc,在传递之前,需要对id和name进行编码。Vue.js提供了内置函数encodeURIComponent来进行编码:

  let id = 123;
  let name = 'abc';
  window.location.href = 'http://mywebsite.com/products?id=' + encodeURIComponent(id) + '&name=' + encodeURIComponent(name);

2. this.$route和this.$router的区别

this.$route和this.$router都是Vue.js中路由器对象router的属性,但含义略有不同。this.$route表示当前路由信息对象,包括路径、参数、查询参数等等,而this.$router表示路由器对象,用来实现编程式导航。因此,this.$route.query和this.$router.query是不一样的。

3. 查询参数的类型问题

查询参数从URL中解析出来之后,都会变成字符串类型,即使它本来是数字或者布尔类型的。因此,在使用查询参数时,需要将其转换为正确的类型,否则可能会造成一系列问题。例如:

  let id = this.$router.query.id; // '123'
  console.log(id + 1); // '1231'

上述代码中,变量id的类型是字符串,因此对其进行加1操作时,实际上是字符串的拼接操作,不是数字的加法操作。正确的做法是将其转换为数字类型:

  let id = parseInt(this.$router.query.id, 10); // 123
  console.log(id + 1); // 124

四、常见问题解答

1. 如何获取路由参数而不是查询参数?

路由参数指的是路径中以冒号“:”开头的变量。例如,路由路径为/products/:id,表示id是一个路由参数。在路由跳转时,可以通过this.$router.params获取路由参数。例如:

  export default {
    created () {
      console.log(this.$route.params.id);
    }
  }

2. 如何在路由参数发生变化时重新渲染组件?

Vue.js提供了watch属性来监听data属性或者路由参数的变化,从而实现自动重新渲染组件。例如,我们可以使用以下代码来实现当路由参数id发生变化时,重新获取商品详情并渲染页面:

  export default {
    data () {
      return {
        product: {}
      }
    },
    watch: {
      '$route.params.id' () {
        this.getProductDetail();
      }
    },
    methods: {
      getProductDetail () {
        // 获取商品详情
        // 更新组件的product属性
      }
    },
    created () {
      this.getProductDetail();
    }
  }

3. 如何在路由参数不存在时显示默认值?

在访问某些页面时,我们可能需要设置默认的查询参数或者路由参数,以便提供更好的用户体验。下面的代码演示了如何为查询参数设置默认值:

  export default {
    data () {
      return {
        type: 'all'
      }
    },
    created () {
      const { type } = this.$router.query;
      if (type) {
        this.type = type;
      } else {
        this.$router.replace({ query: { type: this.type } });
      }
    }
  }

在上述代码中,如果URL中没有指定type查询参数,则会自动跳转到带有默认type参数值的URL。