vue获取query参数

在Vue中获取URL的query参数有几种方式，可以通过路由对象、this.$route.query，或者使用URLSearchParams方法。

1. 使用路由对象：

在Vue中，可以通过路由对象来获取到URL的query参数。通过this.$route.query可以获取到一个包含所有query参数的对象。

示例代码如下：

```javascript

export default {

mounted() {

// 获取URL的query参数

console.log(this.$route.query);

}

}

```

2. 使用URLSearchParams方法：

URLSearchParams是一个用于处理URL的查询字符串的对象，它提供了一些方法来处理query参数。

示例代码如下：

```javascript

export default {

mounted() {

const params = new URLSearchParams(window.location.search);

// 获取特定的query参数

console.log(params.get('param1'));

console.log(params.get('param2'));

}

}

```

3. 在Vue Router中使用路由钩子函数：

在Vue Router中还可以使用路由钩子函数来获取URL的query参数。可以通过beforeRouteEnter、beforeRouteUpdate等钩子函数来获取到query参数。

示例代码如下：

```javascript

export default {

beforeRouteEnter(to

from

next) {

console.log(to.query);

next();

}

beforeRouteUpdate(to

from

next) {

console.log(to.query);

next();

}

}

```

总结：

获取URL的query参数在Vue中有多种方式，可以通过路由对象、this.$route.query，或者使用URLSearchParams方法来获取参数。根据实际需求选择合适的方法来获取和处理query参数。