vue获取url参数

在Vue中获取URL参数有多种方法，下面将介绍其中的几种常用方式。

1. 使用JavaScript的`URLSearchParams`对象：

可以通过URLSearchParams对象来获取URL中的查询参数。首先，创建一个URLSearchParams对象并传入URL的查询参数部分。然后，可以使用该对象的get()方法来获取指定参数的值。

例如，如果URL为`http://example.com/?name=John&age=25`，可以使用以下方式获取name和age参数的值：

```javascript

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

const name = params.get('name'); // 'John'

const age = params.get('age'); // '25'

```

2. 使用Vue Router的$route对象：

如果你正在使用Vue Router，可以通过$route对象来获取URL参数。$route对象是Vue Router插件提供的，可以在任何Vue组件中直接使用。

例如，如果URL为`http://example.com/user/123`，可以使用以下方式获取id参数的值：

```javascript

this.$route.params.id // '123'

```

可以在Vue组件的`mounted()`生命周期钩子函数中使用这个方法来获取URL参数。

3. 使用路由导航守卫：

如果你希望在每次路由切换时都能获取URL参数，可以使用Vue Router的导航守卫。在导航守卫中，可以通过`to`和`from`参数来获取前一个路由和当前路由的URL参数。

例如：

```javascript

router.beforeEach((to

from

next) => {

const id = to.params.id;

// 根据id参数做一些处理

next();

});

```

这个方法可以在Vue Router的初始化阶段使用，确保每次路由切换时都能获取URL参数。

4. 使用全局混入：

如果你希望在整个Vue应用中都可以获取URL参数，可以使用Vue的全局混入。全局混入会将某个对象的选项合并到每个Vue组件中，因此可以在所有组件中使用该对象。

在项目的主入口文件（如main.js）中，可以定义一个全局混入对象，并在其中获取URL参数。然后，通过Vue.mixin()方法将该对象混入到全局选项中。

例如：

```javascript

const urlMixin = {

created() {

// 获取URL参数

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

this.$routeParams = Object.fromEntries(params);

}

};

Vue.mixin(urlMixin);

```

现在，在任何Vue组件中都可以通过`this.$routeParams`来获取URL参数。