Vue项目获取URL中的参数方法

Vue项目获取URL中的参数

Vue项目中，我们经常会需要获取URL中的参数，比如从URL中获取用户id，或者是从URL中获取查询参数等。下面介绍一种Vue项目中获取URL中参数的方法。

获取URL中的参数方法

Vue项目中获取URL中的参数，要在项目中安装vue-router，vue-router是Vue框架的路由插件，可以实现页面的跳转，以及获取URL中的参数。

npm install vue-router

安装完成后，可以使用下面的方法获取URL中的参数：

// 获取URL中的参数
this.$route.query.参数名

例如，假设当前URL为：http://localhost:8080/?userId=123，则可以使用下面的代码获取userId参数的值：

let userId = this.$route.query.userId
// userId的值为123

如果URL中的参数是一个对象，则可以使用下面的方法获取：

// 获取URL中的参数（对象）
this.$route.params.参数名

例如，假设当前URL为：http://localhost:8080/?user={name:'John',age:20}，则可以使用下面的代码获取user参数的值：

let user = this.$route.params.user
// user的值为{name:'John',age:20}

以上就是Vue项目中获取URL中的参数的方法，使用起来非常简单，只需要在Vue项目中安装vue-router插件，使用this.$route.query或this.$route.params即可获取URL中的参数。