在Vue.js中，我们三天两头需要从URL中获取一些参数，以便于在不同的页面间传递数据。而this.$router.query就是Vue Router给的一个用于获取当前路由查询参数的方法。那么this.$router.query究竟是啥意思呢？下面我将详细为巨大家解析。

一、 this.$router.query的基本概念

在Vue Router中，this.$router.query用于获取当前路由的查询参数。查询参数指的是URL中以问号“?”开头的字符串，通常用来传递不同页面之间的参数。比方说 访问一个URL：http://mywebsite.com/products?id=123，其中id就是查询参数。

用this.$router.query非常轻巧松，只需要在需要获取参数的组件中调用即可。

let id = this.$router.query.id;
console.log; // 输出：123

在这玩意儿例子中， 我们通过this.$router.query.id获取了URL中的id参数，并将其赋值给变量id。

三、 this.$router.query与this.$route.query的不一样

虽然this.$router.query和this.$route.query看起来很差不许多，但它们其实吧是不同的。this.$router.query用于获取当前路由的查询参数， 而this.$route.query用于获取当前路由的全部信息，包括路径、参数、查询参数等。

console.log; // 输出：{ id: '123' }

四、常见问题解答

1. 怎么获取路由参数而不是查询参数？

路由参数指的是路径中以冒号“:”开头的变量。在Vue Router中，能通过this.$router.params获取路由参数。

let productId = this.$router.params.productId;
console.log; // 输出：123

2. 怎么在路由参数不存在时看得出来默认值？

在访问有些页面时我们兴许需要设置默认的查询参数或者路由参数。

let type = this.$router.query.type || 'default';
console.log; // 输出：default

3. 怎么在路由参数发生变来变去时沉新鲜渲染组件？

Vue.js给了watch属性来监听data属性或者路由参数的变来变去，从而实现自动沉新鲜渲染组件。

watch: {
  '$route.params.id': function  {
    this.getProductDetail;
  }
},
methods: {
  getProductDetail {
    // 获取商品详情
    // 更新鲜组件的product属性
  }
}

观点。