vue获取url参数

如何在Vue中获取URL参数？对于不了解的小伙伴们，这是一个实用的小技巧。今天，让我来分享一下如何在Vue项目中轻松获取URL参数。

让我们创建一个名为urlParse.js的文件，这个文件将帮助我们URL并获取参数。让我们看看具体的代码：

在urlParse.js文件中：

```javascript

export default {

getUrlKey: function(name) {

return decodeURIComponent((new RegExp('[?|&]'+name+'=([^&;]+)').exec(location.href) || [, ""])[1].replace(/\+/g, ' ')) || null;

}

}

```

这段代码定义了一个名为getUrlKey的函数，它接受一个参数名称（name），并从当前URL中提取对应的值。这个函数使用了正则表达式来匹配URL中的参数，然后返回相应的值。如果找不到参数，则返回null。

接下来，我们需要在Vue项目的根目录下的ma.js文件中注册这个全局方法，以便在项目的任何地方都可以使用它。让我们看看具体的代码：

在ma.js文件中：

```javascript

import urlParse from './urlParse' // 导入urlParse模块以获取URL参数

Vue.prototype.$urlParse = urlParse // 注册全局方法

```

这样，我们就可以在任何Vue组件中使用this.$urlParse来访问urlParse模块中的函数了。

让我们来看一下如何在Vue的登录页面中使用这个方法。假设我们的登录页面路径后面附加了一个名为AuthToken的参数。我们可以这样获取它：

在Vue登录页面代码中：

```javascript

let AuthToken = this.$urlParse.getUrlKey("AuthToken"); // 获取URL中的AuthToken参数值

```

以上就是在Vue中获取URL参数的简单方法。通过创建一个URL的模块，并在Vue中注册为全局方法，我们可以轻松地在任何组件中获取URL参数。希望这个分享能帮助到大家！如果有任何疑问或需要进一步了解的地方，请随时向我提问。