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。

原创文章，作者：JLJIT，如若转载，请注明出处：https://www.506064.com/n/370776.html